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随 着 微 信 〈9 亿 用 户 ) 、 今 日 头条 〈6 亿 用 户 ) 、 视 频 与 音 
频 直 播 、 小 程序 等 新 媒体 平台 的 兴起 ， 相 关 行业 和 产业 越 来 越 兴 
盛 。 新 媒体 将 成 为 新 时 代 的 主要 传播 方式 ， 它 重 塑 了 信息 传播 流 
程 ， 最 大 限度 地 激发 了 各 行 各 业 的 生产 潜力 ; 而 且 现 在 互联 网 
的 普及 降低 了 信息 发 布 门槛 ， 使 得 大 众 不 再 是 单纯 的 信息 接收 
者 ， 他 们 也 可 以 参与 到 信息 生产 中 ， 并 慢 慢 地 成 为 新 的 信息 传 
播 者 。 

新 媒体 如 此 火热 ， 但 是 ， 关 于 新 媒体 广告 设计 的 书籍 在 市 场 
上 却 几 乎 没有 ， 目 前 的 新 媒体 行业 就 好 像 一 个 孩子 ， 有 着 很 大 的 
成 长 空间 。 所 以 ， 笔 者 基于 以 下 三 点 ， 策 划 了 此 书 。 

第 一 ， 新 媒体 产业 的 发 展 ， 必 定 会 带动 人 才 的 需求 ， 如 新 媒 
体 广告 美工 的 需要 。 

第 二 ， 目 前 新 媒体 经 管 类 的 书 ， 已 有 二 三 十 个 品种 ， 销 售 都 
非常 不 错 ， 但 有 关 新 媒体 广告 设计 方面 的 ， 却 还 没有 一 本 书 系 
统 地 讲述 过 。 

第 三 ， 目 前 已 经 有 学 校 开 始 开设 新 媒体 、 新 媒体 广告 的 课 
程 。 人 才 会 对 技能 产生 需求 ， 而 图 书 是 技能 的 载体 。 

笔者 潜心 收集 资料 ， 精 选 $ 大 火热 的 新 媒体 平台 作为 案例 示 
范 ， 为 读者 展示 新 媒体 广告 的 设计 方法 。 希 望 读者 阅读 完 后 可 以 
举一反三 ， 制 作出 更 多 精美 的 效果 。 


本 书 与 同类 书 相 比 ， 特 点 如 下 。 

全 书 主要 分 为 两 大 篇 章 ， 每 个 篇 章 又 详细 分 

为 多 个 章节 ， 并 且 书 中 内 容 是 根据 读者 需求 的 知识 点 按 需 求 排行 进 
行 分 布 的 ， 读 者 可 以 根据 分 类 快速 地 找到 自己 需求 的 知识 点 。 

书 中 内 容 对 于 一 些 图 文 工 具 、 视 频 工 具 、 

频 工具 、H5 工 具 等 分 别 选取 了 多 种 最 方便 快捷 的 工具 来 讲解 ， 

中 包括 创 客 贴 、 麦 客 网 、 人 人 秀 等 网 页 ， 也 包括 VUE、 美 拍 、 

手 等 手机 APP。 


这 并 到 


本 书 内 容 从 零 开 始 ， 从 配色 、 文 字样 式 、 版 
式 开始 总 体 介 绍 新 媒体 设计 的 要 点 ， 再 落实 到 每 个 新 媒体 平台 ， 
并 根据 每 个 平台 的 不 同 特点 来 设计 广告 案例 效果 。 

每 个 案例 都 是 精 挑 细 选 ， 每 个 实例 都 是 从 零 
开始 ， 细 致 地 讲解 了 设计 的 所 有 过 程 ， 目 的 也 是 为 了 帮助 读者 更 
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加 直观 地 感受 到 设计 的 整个 流程 。 
(5) 案例 丰富 。 精 选 多 个 热门 的 新 媒体 平台 来 做 案例 解说 ， 包 括 朋 友 圈 、 公 众 号 、 小 程序 、 头 
条 号 、 微 博 、 微 课 、 直 播 、 微 商 等 8 大 平台 ， 每 个 平台 均 有 3 个 广告 设计 案例 示范 。 


本 书 内 容 。 


本 书 主要 从 “新 媒体 一 工具 篇 ”与 “新 媒体 一 案例 篇 ”两 大 篇 章 ， 来 讲述 新 媒体 广告 设计 的 具体 
方法 ， 大 致 内 容 图 解 如 下 。 


作者 售后 


本 书 由 倪 林 峰 编 著 ， 参 与 编写 的 人 员 还 有 刘 华 敏 ， 在 此 表示 感谢 。 由 于 作者 知识 “ 国 肾 
水 平 有 限 ， 书 中 难免 有 朴 漏 和 不 妥 之 处 ， 奶 请 广大 读者 批评 、 指 正 。 


有 
本 书 提供 了 案例 的 素材 文件 和 效果 文件 ， 扫 一 扫 右 侧 的 二 维 码 ， 推 送 到 自己 的 邮 人 各 
箱 后 下 载 获取 。 加 中 生 二 
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的 主要 传播 方式 ， 因 此 美化 新 媒体 界面 的 新 媒体 美工 也 必 将 成 为 热门 职业 


什么 是 新 媒体 美工 常见 的 字体 风格 
新 媒体 美工 设计 的 意义 文字 的 编排 规则 
认识 色彩 的 三 种 属性 常见 的 版 式 布局 
美工 的 配色 应 用 技巧 图 片 的 布局 处 理 


X 商品 详情 


精华 后 腿 肉 薄片 鲜 香味 宣 看 全文 


良 子 . 猪 
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新 媒体 美工 设计 基础 


新 媒体 将 成 为 新 时 代 的 主要 传播 方式 ， 它 重 塑 了 信息 传播 流程 ， 最 大 限度 地 激发 了 各 行 各 业 的 生 
产 潜 力 ， 而 且 现在 互联 网 的 普及 降低 了 信息 发 布 门槛 ， 使 得 大 众 不 再 是 单纯 的 信息 接收 者 ， 他 们 也 可 
以 参与 到 信息 生产 中 ， 并 慢 慢 地 成 为 新 的 信息 传播 者 。 作 为 美化 新 媒体 界面 的 新 媒体 美工 的 重要 程度 
也 不 言 而 喻 。 本 节 主 要 介绍 新 媒体 美工 设计 的 基础 知识 。 


1.1.1 什么 是 新 媒体 美工 


新 媒体 是 相对 于 传统 媒体 来 说 的 ， 它 是 一 种 利用 数字 技术 、 网 络 技术 和 移动 技术 通过 互联 网 、 
无 线 通 信 网 、 有 线 网 络 等 渠道 以 及 电脑 、 手 机 、 数 字 电 视 机 等 终端 ， 向 用 户 提供 信息 和 娱乐 的 传播 

在 整个 互联 网 时 代 ， 电 商 、 广 告 、 增 值 服 务 需求 大 ， 借 助 新 媒体 ， 可 以 自然 地 连接 起 自 媒 体 和 广 
告 主 ， 让 前 者 有 收益 ， 后 者 有 流量 ， 各 取 所 需 。 

由 于 新 媒体 逐渐 由 热门 转向 火爆 的 趋势 ， 新 媒体 美工 也 应 运 而 生 。 新 媒体 美工 主要 是 对 传播 的 新 


媒体 如 朋友 圈 、 公 众 号 、 小 程序 、 头 条 号 、 微 博 、 微 店 等 界面 进行 图 片 美化 与 布局 排版 的 设计 师 ， 使 
其 能 够 给 大 众 更 加 舒适 的 视觉 体验 ， 也 让 信息 可 以 更 快捷 地 传递 给 大 众 。 如 图 1-1 所 示 是 一 些 运用 新 媒 
体 美工 技术 设计 的 部 分 界面 。 


守土 支 付 股份 有 限 公司 
欧洲 全 可 > 多 基本 资料 
凡生 ve 
| 人 的 站 门 记 二 更 多 》 
= Q le 
【国庆 攻略 】 这 个 假期 ， 旅行 。 维 京 游轮 全 攻 咯 | 从 在 移动 。 清 * en 


和 “看 球 ” 更 配 趴 ~ 上 游 欧洲 是 种 什么 体验 


一 起 为 低 碳 生 活 代言 ! 拉 卡 拉 携 手 比亚迪 ， 号 召 大 
家 绿色 出 行 ， 手 环 与 低 碳 更 配 哦 ! 关注 @ 罩 乔 旭 @ 


日 本 > 时 全 ， 并 转发 分 享 你 的 低 碳 生活 小 妙招 , 抽取 2 


Fn sse [> .Ta 十 关注 联系 企业 = 他 的 热门 


图 1-1 运用 新 媒体 美工 技术 设计 的 部 分 界面 


11.2 新 媒体 美工 设计 的 意义 


从 网 络 上 


的 作用 是 很 大 
品 的 交易 。 


1. 展示 个 性 背景 ， 加 深 品 牌 印象 


新 媒体 美工 设计 可 以 起 到 一 个 品牌 识别 的 作用 。 现 在 几乎 每 个 用 如 


不 过 新 媒体 界面 是 否 美观 、 信 息 是 否 准确 ， 
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上 的 点 击 量 来 看 ， 新 媒体 一 直 是 一 个 热门 话题 。 界 面 作为 用 户 打 开 
美观 性 是 很 重要 的 。 它 的 美观 度 直 接 关系 到 用 户 是 否 会 
的 。 


时 第 一 眼看 到 


会 留 下 来 继续 看 界面 内 的 信息 ， 所 以 新 媒体 美工 


它们 的 核心 都 是 为 了 促进 信息 的 交流 、 


号 ， 而 朋友 圈 则 是 一 个 展示 信息 的 绝 佳 场所 。 将 自己 的 微 信 名 称 、 独 具 特 色 的 头像 和 区 别 于 


图 的 背景 封面 通过 一 定 的 设计 再 展示 出 来 ， 建 立 一 个 有 个 性 的 朋友 图 ， 


刻 的 印象 。 


如 图 1-2 所 示 为 “ 欧 橙 奶 茶 ” 的 朋友 圈 ， 在 该 朋友 圈 界 面 中 可 以 提取 上 


的 LOGO、 销 售 的 商品 、 商 品 主要 销售 的 平台 等 。 


朋友 园 左 上 方 会 显示 微 
信 名 称 ， 可 以 得 知 这 是 
一 个 以 销售 奶茶 零食 为 
主 的 微 商 朋友 图 


烧 仙 草 ! ! ! 


雪 项 吻 只 ! ! 上 


图 1-2 精美 的 朋友 图 设计 


2. 展示 商品 详情 ， 吸 引 顾 客 购买 


在 新 媒体 电 商工 具 界面 中 ， 首 页 中 消费 者 能 够 获 


得 的 信息 


单个 商品 的 展现 提供 了 单独 的 平台 ， 即 商品 详情 页 面 。 
商品 详情 页 面 的 设计 成 功 与 否 ， 直 接 影响 到 商品 的 销售 和 转换 率 。 消 费 者 


威 的 信息 而 产生 购买 的 欲望 ， 所 以 必要 的 、 有 效 的、 丰富 的 商品 信息 的 组 合 和 编排 ， 
展示 了 众多 商品 ， 


于 商品 的 了 解 。 如 图 1-3 所 示 为 某 食品 小 程序 的 界面 ， 
拉 滑 块 来 查看 更 多 商品 。 


它 在 首页 


很 多 重要 信息 一 一 


的 东西 ， 


机 的 人 都 有 一 个 或 多 个 微 信 


其 他 朋友 


可 以 让 人 对 你 的 朋友 圈 留 下 深 


微 商店 铺 


用 户 可 以 从 朋友 
图 背景 封面 中 学 
握 微 商店 铺 的 主 
营 范围 ， 并 且 知 
道 商品 的 主要 销 
售 平台 


有 限 ， 鉴 于 网 络 营销 的 特点 ， 商 家 都 为 


往往 是 因为 直观 的 、 权 


消费 者 还 可 


能 够 加 深 顾 客 对 


以 通过 下 


ee 
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图 1-3 某 食品 小 程序 的 界面 
通过 对 商品 的 详情 页 面 进行 设计 ， 可 以 让 顾客 更 加 直观 、 明 确 地 掌握 商品 信息 ， 可 以 决定 顾客 是 
否 购买 该 商品 。 如 图 1-4 所 示 ， 可 以 从 该 商品 详情 页 面 中 了 解 到 食物 的 颜色 、 厚 度 、 用 料 等 无 法 触摸 的 
信息 。 


为 了 实现 营销 X 商品 详情 
目标 ,使 用 一 
些 道具 拍摄 的 
商品 ， 更 能 吸 
引 顾 客 、 激 发 
顾客 的 购买 欲 
望 ， 从 而 达到 
销售 的 目的 。 
好 的 道具 可 以 
使 商品 更 具 诱 
惑 力 ， 可 以 在 。 

短 短 的 几 秒 内 pr 本 风味 猪肉 天 自然 片 肉 胶 肉 干 休闲 二 


吸引 买 家 Y1590 


精心 设计 的 画 


得 更 为 直观 


图 1-4 展现 商品 详情 


a 对 通过 电脑 和 手机 购物 的 消费 者 来 说 ， 他 们 花费 在 购物 上 的 时 间 是 计 入 其 购物 

E >/ 成 本 当中 的 。 因 而 商家 需要 像 实 体 店 一 样 ， 增 加 一 个 虚拟 网 店 空 交 风 和 虱 训 洒 二 和 

Bi re 要 达到 这 两 个 目的 ， 需 要 做 到 以 下 两 方面 。 

: ， 提 升 网 店 空间 的 使 用 率 ， 让 单一 的 网 店 能 够 容纳 更 多 的 产品 信息 ， 通 过 合适 的 设计 来 

We : 
其 二 ， 在 产品 之 间 的 关联 和 产品 分 类 的 优化 上 下 功夫 ， 从 而 给 从 予 消费 者 最 大 的 选 购 空 间 。 | 
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3. 实现 视觉 营销 ， 提 升 店铺 转化 率 

新 媒体 电 商 的 转化 率 ， 就 是 所 有 到 达 店铺 并 产生 购买 行为 的 人 数 和 所 有 到 达 商 家 店铺 的 人 数 的 比 
例 。 新 媒体 电 商 的 转化 率 提升 了 ， 店 铺 的 生意 也 会 更 上 一 层 楼 。 影 响 新 媒体 电 商 转化 率 的 因素 主要 如 
图 1-5 所 示 。 


i 


图 1-5 ”影响 网 店 转化 率 的 因素 
在 图 1-5 中 ， 店 铺 装修 、 活 动 搭配 、 商 品 展 示 等 都 可 以 通过 视觉 设计 来 实现 ， 可 见 新 媒体 美工 的 设 
计 是 能 够 直接 对 新 媒体 电 商 的 转化 率 产生 影响 的 。 在 进行 店铺 装修 和 推广 的 过 程 中 ， 商 家 还 要 注意 如 
图 1-6 所 示 的 问题 ， 其 中 “活动 页 面 ” 中 信息 的 呈现 可 以 通过 店铺 装修 来 完成 ， 由 此 可 见 店 铺 装 修 与 店 
铺 转化 率 之 间 的 紧密 关系 。 


-重量 
图 1-6 ”店铺 装修 和 推广 过 程 中 需要 注意 的 问题 

由 此 可 见 ， 店 铺 装 修 不 可 轻视 ， 这 直接 影响 到 店铺 的 跳出 率 ， 也 就 是 影响 到 店铺 的 交易 量 。 因 
此 ， 商 家 有 必要 从 各 方面 考虑 店铺 的 设计 。 好 的 设计 不 但 能 够 提升 店铺 的 档次 ， 还 可 以 让 消费 者 感受 
到 在 此 店铺 购物 能 够 有 良好 的 保障 。 

4 . 确定 界面 风格 ， 突 出 产品 特色 

对 各 类 通过 新 媒体 平台 来 营销 的 商家 来 说 ， 界 面 设计 的 好 坏 、 能 否 吸引 用 户 的 眼球 、 能 和 否 突出 产 
品 特色 ， 都 是 至 关 重 要 的 。 界 面 设计 风格 的 确定 ， 涉 及 了 整体 运营 的 思考 ， 确 定 风格 之 前 ， 需 要 认真 
思考 一 下 自己 所 销售 的 产品 最 突出 的 是 哪 一 点 。 对 于 界面 的 风格 设 定 ， 需 要 每 个 商家 认真 思考 ， 接 下 
来 从 两 个 方面 入 手 ， 介 绍 如 何 确定 界面 设计 的 风格 。 

1) 选择 合适 的 整体 色调 

色调 指 的 是 一 幅 画 中 画面 色彩 的 总 体 倾向 ， 是 大 的 色彩 效果 。 在 界面 设计 中 ， 色 调 是 指 界面 的 总 
体 色 彩 表现 ， 是 界面 设计 大 体 的 色彩 效果 ， 是 一 种 一 目 了 然 的 感觉 。 不 同 颜色 的 界面 都 带 有 同一 色彩 
倾向 ， 这 样 的 色彩 现象 就 是 色调 。 色 调 的 表现 在 于 给 人 一 种 整体 的 感觉 ， 或 突出 青春 活力 ， 或 突出 专 
业 销 售 ， 或 突出 童真 活泼 等 。 

如 图 1-7 所 示 为 一 家 服饰 微 店 的 界面 。 微 店 卖家 从 销售 商品 的 色彩 入 手 ， 选 取 与 商品 颜色 相近 的 色 


彩 作为 界面 的 主 色调 ， 体 现 了 自己 产品 的 特点 与 营销 的 特色 。 
| 


Photoshop 
新 媒体 广告 设计 


蓝 紫 色 为 微 店 首页 的 背景 色 ， 
也 是 整个 画面 的 色调 倾向 ， 它 
是 根据 店铺 陈列 的 商品 色彩 进 
行 提炼 而 得 到 的 


图 1-7 选择 合适 的 主 色调 
不 过 也 可 以 根据 界面 设计 确定 的 关键 词 入 手 。 例 如 ， 若 确定 微 店 装修 的 风格 为 时 尚 男 装 ， 则 可 以 
选择 黑色 、 灰 色 等 一 些 纯度 和 明度 较 低 的 色彩 来 对 装修 的 图 片 进行 配色 。 
2) 设计 详情 页 面 橱窗 照 
通常 情况 下 ， 消 费 者 进入 一 个 网 店 ， 大 都 是 因为 对 其 中 的 单个 商品 感 兴趣 ， 而 单个 商品 在 众多 搜 
索 出 来 的 商品 中 是 以 主 图 的 形式 ， 也 就 是 橱窗 照 的 形式 进行 展示 的 ， 如 图 1-8 所 示 。 


国 本 本田 人 加 本 咽 可 h 
图 1-8 橱窗 照 

商品 主 图 是 用 来 展现 产品 最 真实 的 一 面 ， 而 不 是 用 来 罗列 网 店 的 所 有 活动 的 。 但 是 ， 部 分 店家 为 
了 将 店铺 中 的 信息 尽 可 能 多 地 传递 出 去 ， 将 橱窗 照 的 作用 理解 错 了 。 比 如 在 橱窗 照 商品 图 像 以 外 的 空 
隙 处 ， 添 加 “最 后 一 天 ”“ 满 百 包 邮 ” 等 众多 信息 ， 主 次 不 分 ， 给 顾客 一 种 凌乱 的 感觉 ， 不 能 体现 店 
铺 的 专业 性 。 

通常 ， 在 橱窗 照 上 只 需要 突出 自己 的 产品 或 是 营销 的 一 个 点 即 可 ， 不 要 加 入 太 多 无 谓 的 信息 。 
顾客 买 东西 ， 是 冲 着 产品 去 的 ， 而 不 是 冲 着 “ 仅 此 一 天 啦 ”“ 最 后 一 天 啦 ” 这 些 附属 的 信息 去 竹 店 
铺 的 。 当 然 ， 要 设置 限时 购 等 促销 ， 可 以 在 商品 详情 页 面 中 进行 设计 ， 但 是 在 体现 商品 形象 的 橱窗 照 
中 ， 尽 量 不 要 添加 这 类 信息 。 


第 人 章 ， 新 媒体 美工 设计 人 门 


1.1.3 ”认识 色彩 的 三 种 属性 
把 新 媒体 界面 设计 好 ， 让 自己 的 界面 更 好 看 一 点 、 更 漂亮 一 点 ， 这 样 就 会 在 视觉 上 吸引 消费 者 ， 
给 商家 带 来 更 多 的 生意 。 对 进入 界面 的 用 户 来 说 ， 他 们 首先 会 被 界面 中 的 色彩 所 吸引 ， 然 后 根据 色彩 
的 走向 对 画面 的 主 次 逐一 进行 了 解 。 本 节 主 要 对 新 媒体 界面 的 色彩 设计 知识 进行 讲解 。 这 些 基 础 知识 
也 是 后 期 新 媒体 界面 设计 配色 中 的 关键 所 在 。 
色彩 本 身 具 有 极其 细腻 的 变化 。 在 生活 中 我 们 可 以 看 见 各 种 各 样 的 色彩 ， 这 也 说 明了 色彩 具有 多 
样 性 。 我 们 在 理解 色彩 的 多 样 性 时 ， 可 以 从 色彩 的 基本 属性 入 手 。 
色彩 具有 三 个 属性 ， 即 色相 、 明 度 和 纯度 ， 如 图 1-9 所 示 。 
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图 1-9 色彩 的 三 属性 

1. 色相 

色相 也 就 是 色彩 本 身 ， 是 色彩 性 格 的 外 在 体现 。 色 相 是 色彩 的 首要 特征 ， 是 区 别 各 种 不 同色 彩 最 
准确 的 标准 。 

从 光学 意义 上 讲 ， 即 便 是 同一 类 色彩 ， 也 能 分 为 几 种 色相 ， 如 黄色 彩 可 以 分 为 中 黄 、 土 黄 、 柠 榜 
黄 等 。 人 的 眼睛 可 以 分 辨 出 约 180 种 不 同色 相 的 色彩 。 

最 初 的 基本 色相 为 红 、 橙 、 黄 、 绿 、 蓝 、 紫 。 在 各 色 中 间 加 插 一 两 个 中 间 色 ， 按 光谱 顺序 为 : 
红 、 红 橙 、 橙 、 黄 橙 、 黄 、 黄 绿 、 绿 、 蓝 绿 、 蓝 、 蓝 紫 、 紫 和 红 紫 ， 可 制作 出 12 种 基本 色相 。 

1) 色相 环 

将 12 种 基本 的 色相 按照 环 状 排列 起 来 ， 就 形成 了 色相 环 。 色 相 环 由 原色 、 间 色 、 复 色 构 成 ， 它 是 
我 们 选择 色彩 的 一 个 强 有 力 的 工具 ， 如 图 1-10 所 示 。 


椅 羔 “12 色相 环 。 艺 问 


从 . 
基 。 坟 


图 1-10 12 色相 环 
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(1) 原色 。 

色相 环 由 12 种 基本 色彩 组 成 。 首 先 包含 的 是 色彩 三 原色 ， 即 红 、 黄 、 蓝 。 色 彩 中 不 能 再 分 解 的 基 
本 色 称 为 原色 。 原 色 能 合成 出 其 他 颜色 ， 而 其 他 颜色 不 能 还 原 出 本 来 的 色彩 。 

三 原色 是 色相 环 的 “ 母 色 ”， 它 们 是 唯一 不 能 由 其 他 颜色 调 出 来 的 色彩 ， 三 原色 围绕 色相 环 平均 
分 布 ， 两 两 成 120 度 ， 如 图 1-11 所 示 。 由 于 三 原色 的 不 可 协调 性 ， 在 信息 图 的 色彩 使 用 中 ， 画 面 会 给 人 
浮躁 的 感觉 。 不 过 搭配 间 色 能 产生 很 好 的 效果 ， 如 搭配 绿色 、 紫 色 和 橙色 三 种 间 色 ， 可 以 使 画面 色彩 
饱满 且 具 有 秩序 感 。 

(2) 间 色 。 

原色 混合 产生 了 间 色 ， 位 于 两 种 三 原色 一 半 的 地 方 。 每 一 种 间 色 都 是 由 离 它 最 近 的 两 种 原色 等 量 
混合 而 成 。 例 如 ， 黄 色 和 红色 混合 形成 橙色 ， 那 么 杜 色 就 为 间 色 。 

间 色 位 于 两 原色 的 中 部 ， 并 且 由 与 之 相 邻 的 两 个 原色 平均 混合 得 到 ， 如 图 1-12 所 示 。 


本 
/ 人 BA 
图 1-11 三 原色 图 1-12 间 色 
(3) 复 色 。 
复 色 又 叫 三 次 色 ， 是 由 相 邻 的 两 种 色彩 混合 而 成 ， 它 可 以 由 两 个 间 色 混合 而 成 ， 也 可 以 由 一 种 原 
色 和 其 对 应 的 间 色 混合 而 成 ， 如 图 1-13 所 示 。 


例如 ， 原 色 黄 色 和 间 色 橙色 可 以 混合 出 黄 橙 色 ， 那 么 黄 橙色 就 称 为 复 色 。 


复 色 由 与 之 相 邻 的 原色 和 间 色 |< 
混合 得 到 


第 人 章 ， 新 媒体 美工 设计 和 人 门 


2) 色相 搭配 

色相 的 配色 是 以 色相 环 为 基础 进行 思考 的 。 用 色相 环 上 类 似 的 色彩 进行 配色 ， 可 以 得 到 稳定 而 统 
一 的 感觉 ， 用 距离 远 的 色彩 进行 配色 ， 可 以 达到 一 定 的 对 比 效果 。 下 面 介 绍 色 相 搭配 的 6 大 种 类 。 

(1) 单 色 。 

单 色 主要 是 指 在 同一 色相 中 不 同 的 色彩 变化 。 在 同一 色相 的 色彩 中 加 入 白色 、 灰 色 或 者 黑色 ， 从 
而 形成 明暗 深浅 的 变化 ， 如 图 1-14 所 示 。 单 色 虽 无 色相 对 比 ， 却 形成 了 深 、 中 、 浅 的 色彩 明度 对 比 。 

在 色相 环 中 30 度 之 间 的 色彩 均 可 认为 是 单 色 ， 采 用 单 色 搭 配 ， 缺 乏 色彩 的 层次 感 ， 属 于 对 比比 较 
弱 的 色 组 。 但 是 可 以 形成 明暗 的 层次 ， 给 人 一 种 简洁 明快 、 单 线 和 谐 的 统一 美 。 

(2) 近似 色 。 

近似 色 之 间 往 往 是 你 中 有 我 ， 我 中 有 你 ， 如 图 1-15 所 示 。 


图 1-14 单 色 图 1-15 近似 色 

例如 ， 朱 红 以 红 为 主 ， 里 面 略 带 少量 黄色 ， 桶 黄 以 黄 为 主 ， 里 面 有 少许 红色 。 虽 然 它们 在 色相 上 
有 很 大 差别 ， 但 在 视觉 上 却 比 较 接 近 。 

近似 色 之 间 具 有 很 强 的 潜在 关联 性 ， 能 营造 出 赏心悦目 的 和 谐 感 ， 而 且 近 似 色 的 色调 非常 丰富 ， 
运用 起 来 也 不 难 。 

在 色相 环 中 ， 凡 在 60 度 范围 之 内 的 色彩 都 属于 近似 色 的 范围 。 因 为 近似 色 都 拥有 共同 的 色彩 ， 所 以 色 
相间 色彩 倾向 近似 ， 冷 色 组 或 暖色 组 较 明 显 ， 色 调 统一 和 谐 、 感 情 特性 一 致 ， 具 有 低 对 比 度 的 和 谐 美感 。 

(3) 补 色 。 

补 色 是 在 色相 环 中 相距 180 度 的 色彩 ， 如 红 与 绿 、 黄 与 紫 、 橙 与 蓝 都 是 补 色 。 补 色 的 搭配 能 使 色 
彩 之 间 的 对 比 效果 达到 最 强烈 ， 如 图 1-16 所 示 。 运 用 补 色 可 以 形成 强烈 的 对 比 ， 一 种 颜色 与 其 补 色 配 
合 可 表现 出 力量 、 气 势 和 活力 。 通 常 ， 强 调 色 的 使 用 量 比 其 补 色 少 。 例 如 ， 在 一 片 绿色 区 域 上 使 用 一 
点 红色 ， 那 么 红色 就 是 强调 色 ， 绿 色 就 是 补 色 。 

(4) 分 裂 补 色 。 

如 果 组 合 中 同时 存在 某 种 颜色 的 补 色 及 其 补 色 的 近似 色 ， 则 这 种 颜色 就 是 分 裂 补 色 。 分 裂 补 色 可 
由 两 种 或 三 种 色彩 〈 同 时 搭配 左右 两 边 的 色相 ) 构成 ， 如 图 1-17 所 示 。 

近似 色 间 的 柔和 的 美 ， 加 上 补 色 间 强烈 的 视觉 冲击 ， 使 得 分 裂 补 色 独 具 感 染 力 。 采 用 红色 、 黄 绿色 和 
蓝 绿色 ， 形 成 分 裂 补 色 的 搭配 。 这 种 色彩 搭配 既 具 有 近似 色 的 低 对 比 度 的 美感 ， 又 具有 补 色 的 力量 感 。 


(5) 对 比 色 。 


对 比 色 也 称 大 跨度 色 域 对 比 ， 指 色相 距离 120 度 至 150 度 之 间 的 对 比 关 系 ， 如 图 1-18 所 示 。 
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图 1-16 补 色 图 1-17 分 裂 补 色 


红色 与 黄 绿 色 的 配 
色 ， 属 于 色相 的 中 
强 对 比 ， 这 种 对 比 
有 着 鲜明 的 色相 
感 ， 但 对 比 又 不 会 
很 强烈 


图 1-18 对 比 色 


(6) 全 色相 。 

全 色相 ， 顾 名 思 义 ， 就 是 指 色 相 环 里 的 所 有 色相 。 全 色相 搭配 可 以 给 人 带 来 随时 参与 进去 的 气 
氛 ， 适 合 节日 气氛 ， 给 人 一 种 充满 青春 活力 的 感觉 。 

2. 明度 

明度 就 是 色彩 的 明暗 差别 、 光 亮 程度 ， 所 有 的 色彩 都 有 自己 的 光亮 。 其 中 ， 暗 色 被 称 为 低 明 度 ， 
亮色 被 称 为 高 明度 。 外 部 较 大 的 两 个 环 由 深 色 组 成 ， 内 部 较 小 的 两 个 环 由 浅 色 组 成 ， 如 图 1-19 所 示 。 


图 1-19 明度 对 比 
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有 彩色 的 明度 有 两 个 方面 的 差别 。 一 是 某 一 色相 在 混入 黑色 或 者 白色 后 ， 产 生 的 深浅 变化 ， 
如 图 1-20 所 示 。 


图 1-20 深浅 变化 
二 是 彩色 不 同色 之 间 的 明度 存在 差别 ， 比 如 在 红 、 橙 、 黄 、 绿 、 蓝 、 紫 6 种 标准 色 中 ， 黄 最 浅 ， 
紫 最 深 ， 橙 和 绿 、 红 和 蓝 处 于 相近 的 明度 之 间 。 我 们 可 以 将 有 彩色 转换 为 无 彩色 ， 来 更 加 直观 地 观察 
明度 变化 ， 如 图 1-21 所 示 。 


红 檬 黄 绿 昔 烷 
图 1-21 不 同色 相 的 明度 差别 
明度 是 决定 配色 的 光 感 、 明 快感 、 清 晰 感 以 及 心理 作用 的 关键 。 简 单 来 说 ， 明 度 就 是 通过 对 比 的 
手法 ， 把 握 作品 中 黑 、 白 、 灰 的 关系 。 
依据 明度 色 标 ， 可 以 大 致 将 明度 分 为 3 个 区 域 : 0 一 3 度 为 低 明 度 ， 4 一 6 度 为 中 明度 ，7 一 10 度 为 高 


明度 ， 如 图 1-22 所 示 。 
| 低 明度 中 明度 高 明度 


图 1-22 明度 变化 

按照 明度 不 同 ， 明 度 配 色 可 分 为 同 明度 (画面 色彩 采用 同一 个 明度 ) 、 近 似 明度 (3 度 差 以 
内 ) 、 中 差 明度 〈3 一 5 度 差 ) 和 对 比 明度 〈5 度 差 以 上 ) 4 种 。 

3. 纯度 

纯度 也 称 饱 和 度 或 彩 度 、 鲜 艳 度 。 色 彩 的 纯度 强 弱 ， 是 指 色相 感觉 明确 或 含糊 、 鲜 艳 或 混浊 的 程度 。 

根据 色相 环 的 色彩 排列 ， 相 邻 色 相 混合 ， 纯 度 基本 不 变 。 比 如 ， 红 色 和 黄色 相 混合 ， 将 得 到 相同 
纯度 的 橙色 ， 如 图 1-23 所 示 。 

对 比 色 相 混合 ， 最 易 降 低 纯度 ， 以 至 成 为 灰暗 色彩 ， 例 如 ， 红 色 和 绿色 混合 ， 则 得 到 浊 色 ， 如 图 1-24 


示 。 


图 1-23 相 邻 色 混合 ， 纯 度 不 变 图 1-24 对 比 色 混合 ， 降 低 纯 度 
色彩 的 纯度 变化 ， 可 以 产生 丰富 的 强 弱 不 同 的 色相 ， 而 且 能 够 使 色彩 产生 独特 的 韵味 与 美感 。 
纯度 越 高 ， 色 彩 越 显 鲜艳 和 引 人 注 意 ， 独 立 性 及 冲突 性 越 强 ， 纯 度 越 低 ， 色 彩 越 显 朴素 而 典雅 、 

安静 而 温和 ， 独 立 性 及 冲突 性 越 弱 。 因 此 ， 主 体 色 通常 以 高 纯度 配色 来 达到 突显 的 效果 。 


所 
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纯度 本 身 的 刺激 作用 不 如 明度 的 变化 大 ， 因 此 纯度 变化 应 该 搭配 明度 变化 和 色相 变化 ， 才 能 达到 
较 活泼 的 配色 效果 。 

以 红色 为 例 ， 从 纯 红色 到 灰色 分 为 10 个 阶段 ， 根 据 纯度 之 间 的 差别 ， 可 以 形成 不 同 纯度 对 比 的 纯 
度 色 调和 纯度 序列 。 相 差 4 个 阶段 以 内 的 纯度 为 近似 纯度 ， 相 差 8 个 阶段 以 内 的 纯度 为 对 比 纯度 ， 
如 图 1-25 所 示 。 


1.1.4 美工 的 配色 应 用 技巧 


从 视觉 的 角度 而 言 ， 消 费 者 最 先 感知 的 便 是 新 媒体 界面 中 的 色彩 。 任 何 色彩 都 具备 色相 、 明 度 和 
纯度 3 个 基本 要 素 。 如 何 正确 地 运用 常见 的 配色 方案 ， 是 设计 新 媒体 界面 必 备 的 技能 。 

1. 新 媒体 界面 中 的 对 比 配色 技巧 

在 我 们 生活 的 世界 中 ， 时 时 处 处 都 充满 着 各 种 不 同 的 色彩 。 人 们 在 接触 这 些 色 彩 的 时 候 ， 常 常 都 
会 以 为 色彩 是 独立 的 ,天空 是 蓝 色 的 ， 植 物 是 绿色 的 ， 而 花 杂 是 红色 的 。 

其 实 ， 色彩 就 像 音符 一 样 ， 唯 有 一 个 个 的 音符 组 合 才 能 谱 出 美妙 的 乐章 ， 色 彩 亦 如 是 。 没 有 哪 一 
个 色彩 是 独立 存在 的 ， 也 没有 哪 一 种 颜色 本 身 是 好 看 的 颜色 或 是 不 好 看 的 颜色 ;而 相反 地 ， 只 有 当 色 
彩 成 为 一 组 颜色 中 的 一 个 时 ， 我 们 才 会 说 这 个 颜色 在 这 里 协调 还 是 不 协调 、 适 合 还 是 不 适合 。 

前 面 介绍 过 色彩 是 由 色相 、 明 度 、 纯 度 3 种 属性 所 组 成 的 ， 而 其 中 的 色相 是 人 在 最 早 认识 色彩 的 
时 候 所 理解 到 的 属性 ， 也 就 是 所 谓 色彩 的 名 称 ， 如 红色 、 黄 色 、 蓝 色 等 。 如 图 1-26 所 示 为 由 最 常见 的 
12 色 相 环 得 到 的 互补 色 。 


12 种 色相 环 红 绿 互补 fe w=") 


图 1-26 色相 环 互补 色 

为 互补 色 有 强烈 的 分 离 性 ， 所 以 使 用 互补 色 的 配色 设计 ， 可 以 有 效 地 加 强 整 体 配 色 的 对 比 度 、 
拉 开 距离 感 ， 而 且 能 表现 出 特殊 的 视觉 对 比 与 平衡 效果 ， 使 用 恰当 的 话 能 让 作品 呈现 出 活泼 、 充 满 生 
命 力 的 效果 。 
如 图 1-27 所 示 为 色相 差异 较 大 的 对 比 配 色 的 公众 号 文章 封面 。 

当然 ， 如 果 将 色彩 的 条 件 稍微 放宽 一 点 ， 比 如 说 180 度 互补 色 的 邻近 色 系 也 纳入 配色 考虑 的 话 ， 
可 以 形成 的 色彩 配色 就 更 宽广 、 更 丰富 了 。 

由 于 互补 色彩 之 间 的 对 比 相当 强烈 ， 所 以 想 要 适当 地 运用 互补 色 ， 必 须 特别 慎重 地 考虑 色彩 彼此 
间 的 比例 问题 。 当 使 用 对 比 色 配 色 时 ， 必 须 利 用 一 种 大 面积 的 颜色 与 另 一 个 面积 较 小 的 互补 色 来 达到 
平衡 。 如 果 两 种 色彩 所 占 的 比例 相同 ， 那 么 对 比 会 显得 过 于 强烈 。 


图 中 的 微 信 公众 号 界面 ， 使 用 颜色 对 
比 强烈 的 主 图 来 作为 文章 的 封面 ,使 
其 色相 之 间 产 生 较 大 的 差异 。 这 样 产 
生 的 对 比 效果 就 是 色相 对 比 配色 , 它 |< 一 一 一 一 
让 画面 色彩 丰富 ， 具 有 感官 刺激 性 ， 
很 容易 地 吸引 用 户 的 眼球 ， 使 其 产生 
浓厚 的 兴趣 你 扫 出 的 本 片 比 夺 人 甸 形 不 各 ， 县 
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[ 刻 ] 。 构图 大 师 。” 直 播 教程 。 ”影展 点 评 
图 1-27 对 比 配色 的 公众 号 界面 效果 
同一 种 色彩 ， 面 积 大 而 光量 、 色 量 亦 增强 ， 易 见 性 及 稳定 性 高 ， 当 较 大 面积 的 色彩 成 为 主 色 时 受 
周围 色彩 的 影响 小 ， 色 彩 的 面积 差异 越 大越 容 易 调和 。 
如 图 1-28 所 示 ， 该 网 店 广告 采用 的 是 面积 对 比 的 配色 方案 ， 可 以 让 商品 的 特点 更 加 醒目 和 清晰 ， 
产生 较 大 的 视觉 冲击 力 ， 能 够 取得 引 人 注 目的 效果 。 


图 1-28 网 店 装修 中 的 对 比 配色 效果 
例如 ， 红 与 绿 如 果 在 画面 上 占有 同样 面积 ， 就 容易 让 人 头晕 目 上 肪 。 可 以 选择 其 中 之 一 的 颜色 为 大 
面积 ， 构 成 主 调 色 ， 而 另 一 颜色 为 小 面积 ， 作 为 对 比 色 。 通 常情 况 下 ， 会 以 3 : 7 甚至 2 ; 8 的 比例 作为 
分 配 原则 。 
2. 新 媒体 界面 中 的 调和 配色 技巧 
“ 调 ” 是 调整 、 调 理 、 调 停 、 调 配 、 安 顿 、 安 排 、 搭 配 、 组 合 等 意思 ; “和 ”可 理解 为 和 一 、 
和 和顺、 和谐、 和 平 、 融 治 、 相 安 、 适 宜 、 有 秩序 、 有 规 算 、 有 和 条理、 恰当， 没有 尖锐 的 冲突 ， 相 互 依 
存 ， 相 得 益 彰 等 意思 。 
配色 的 目的 就 是 制造 美的 色彩 组 合 ， 而 和 谐 是 色彩 美的 首要 前 提 。 色 彩 的 和 谐 让 人 感觉 到 愉悦 ， 
时 还 能 满足 人 们 视觉 上 的 需求 以 及 心理 上 的 平衡 。 
我 们 知道 ， 和 谐 来 自 对 比 ， 和 谐 就 是 美 。 对 比 则 是 刺激 神经 兴奋 的 因素 ， 但 只 有 兴奋 而 没有 舒适 
的 休息 会 造成 疲劳 ， 造 成 精神 的 紧张 ， 这 样 调和 也 就 成 了 一 句 空话 。 
如 此 看 来 ， 既 要 有 对 比 来 产生 和 谐 的 刺激 一 一 美的 享受 ， 又 要 有 适当 的 调和 来 抑制 过 分 的 对 
比 一 一 刺激 ， 从 而 产生 一 种 恰到好处 的 对 比 一 一 和 谐 的 、 美 的 享受 。 总 的 来 说 ， 色 彩 的 对 比 是 绝对 
的 ， 而 调和 是 相对 的 ， 调 和 是 实现 色彩 美的 重要 手段 。 


可 
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1) 以 色相 为 基础 的 调和 配色 

在 保证 色相 大 致 不 变 的 前 提 下 ， 通 过 改变 色彩 的 明度 和 纯度 来 达到 配色 的 效果 ， 这 类 配色 方式 保 
持 了 色相 上 的 一 致 性 ， 所 以 色彩 在 整体 效果 上 很 容易 达到 调和 。 

以 色相 为 基础 的 配色 方案 主要 有 以 下 几 种 。 

(1) 同一 色相 配色 : 指 相同 的 颜色 在 一 起 的 搭配 ， 比 如 蓝 色 的 上 衣 配 上 蓝 色 的 裤子 或 者 裙子 ， 
这 样 的 配色 方法 就 是 同一 色相 配色 法 ， 如 图 1-29 所 示 。 


画面 中 的 文字 、 背 景 等 都 使 用 蓝 色 渐 
变 进行 搭配 ， 通 过 明度 的 变化 使 其 产 
生 强 烈 的 差异 ， 也 使 得 画面 配色 丰富 
起 来 ， 表 现 出 柔和 的 特性 


图 1-29 同一 色相 配色 

(2) 类 似 色相 配色 : 指 色 相 环 中 类 似 或 相 邻 的 两 个 或 两 个 以 上 的 色彩 搭配 。 例 如 ， 黄 色 、 橙 黄 
色 、 橙 色 的 组 合 ， 紫 色 、 紫 红色 、 紫 蓝 色 的 组 合 等 都 是 类 似 色相 配色 。 类 似 色 相配 色 在 大 自然 中 出 现 
得 特别 多 ， 有 嫩绿 、 鲜 绿 、 黄 绿 等 ， 这 些 类 似 色相 配色 都 是 自然 的 造化 。 

(3) 对 比 色相 配色 : 指 在 色相 环 中 ， 位 于 色相 环 圆心 直径 两 端的 色彩 或 较 远 位 置 的 色彩 搭配 。 
它 包含 了 中 差 色相 配色 、 对 照 色 相配 色 、 辅 助 色相 配色 。 在 24 色 相 环 中 ， 两 色相 相差 4~7 个 色 ， 称 为 
基色 的 中 差 色 ， 在 色相 环 上 有 90 度 左右 的 角度 差 的 配色 就 是 中 差 配色 ， 在 色相 环 上 ， 色 相差 为 8 一 10 
的 色相 组 合 ， 被 称 为 对 照 色 。 从 角度 上 说 ， 相 差 135 度 左右 的 色彩 配色 就 是 对 照 色 。 色 相差 为 11 一 12， 
角度 差 为 165 度 一 180 度 的 色相 组 合 ， 称 为 辅助 色 配色 。 

(4) 色相 调和 中 的 多 色 配 色 : 在 色相 对 比 中 ， 除 了 两 色 对 比 ， 还 有 三 色 、 四 色 、 五 色 、 六 色 、 
八 色 甚至 多 色 的 对 比 。 在 色相 环 中 成 等 边 三 角形 或 等 腰 三 角形 的 三 个 色相 搭配 在 一 起 时 ， 称 为 三 角 配 
色 。 四 角 配 色 常 见 的 有 红 、 黄 、 蓝 、 绿 及 红 、 橙 、 黄 、 绿 、 蓝 、 紫 等 色 。 

2) 以 明度 为 基础 的 调和 配色 

明度 是 人 类 分 辨 物体 最 敏锐 的 色彩 反应 ， 它 的 变化 可 以 表现 事物 的 立体 感 和 远近 感 。 例 如 : 希腊 
的 雕刻 艺术 就 是 通过 光影 的 作用 产生 了 许多 黑白 灰 的 相互 关系 ; 中 国 的 国画 也 经 常 使 用 无 彩色 的 明度 
搭配 。 有 彩色 的 物体 也 会 受到 光影 的 影响 产生 明暗 效果 ， 如 紫色 和 黄色 就 有 着 明显 的 明度 差 。 

明度 可 以 分 为 高 明度 、 中 明度 和 低 明 度 3 类 ， 这 样 明 度 就 有 了 高 明度 配 高 明度 、 高 明度 配 中 明 
度 、 高 明度 配 低 明 度 、 中 明度 配 中 明度 、 中 明度 配 低 明 度 、 低 明度 配 低 明度 6 种 搭配 方式 。 其 中 ， 高 
明度 配 高 明度 、 中 明度 配 中 明度 、 低 明度 配 低 明 度 ， 属 于 相同 明度 配色 。 在 网 店 装修 中 ， 一 般 使 用 明 
度 相 同 、 色 相 和 纯度 变化 的 配色 方式 ， 如 图 1-30 所 示 。 
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画面 中 的 文字 和 背景 图 片 
的 配色 均 为 低 明 度 调和 配 
色 ， 带 给 人 和 舒适 的 感觉 ， 
表现 出 优雅 的 氛围 ， 很 符 
合 画 面 中 家 纺 的 形象 


图 1-30 ”以 明度 为 基础 的 调和 配色 
3) 以 纯度 为 基础 的 调和 配色 
纯度 的 强 弱 代表 着 色彩 的 显 灰 程度 ， 在 一 组 色彩 中 ， 当 纯度 的 水 平 相对 一 致 时 ， 色 彩 的 搭配 也 就 
很 容易 达到 调和 的 效果 。 随 着 纯度 高 低 的 不 同 ， 色 彩 的 搭配 也 会 有 不 一 样 的 视觉 感受 。 如 图 1-31 所 示 
为 以 纯度 为 基础 的 朋友 圈 调 和 配色 方案 。 


图 为 “匠心 香料 ”的 
朋友 图 界面 ， 画 面 处 
于 一 种 柔和 的 中 性 纯 
度 的 色调 中 ， 让 人 产 
生 一 种 内 心 踏实 和 温 
声 的 感觉 


优惠 大 三 宾 ! 欲 购 从 束 | 


上 新 啤 


Se 


图 1-31 以 纯度 为 基础 的 调和 配色 


PCCS ( Practical Color Coordinate System ) 色彩 体系 提出 了 色调 这 个 观点 ， 色 
调经 过 命名 分 类 后 ， 分 布 于 不 同 的 区 域 ， 更 加 方便 配色 使 用 。 凡 色调 配色 ， 要 领 有 
; 三 ， 即 同一 色调 配色 、 类 似 色 调配 色 以 及 对 比 色调 配色 。 
”> 同一 色调 配色 。 同 一 色调 配色 是 将 相同 色调 的 不 同 颜色 搭配 在 一 起 形成 的 一 种 配色 关系 。 同 一 | 
”色调 的 颜色 ,色彩 的 纯度 和 明度 具有 共同 性 ， 明 度 按照 色相 略 有 变化 。 不 同色 调 会 产生 不 同 的 
色彩 印象 ， 将 纯色 调 全 部 放 在 一 起 ,会 产生 活泼 感 ， 如 要 儿 服 饰 和 玩具 都 以 淡色 调 为 主 。 在 对 
| 比 色相 和 中 差 色相 的 配色 中 ， 一 般 采 用 同一 色调 的 配色 手法 ， 更 容易 进行 色彩 调和 。 | 
”> ”类似 色 调配 色 。 类 似 色 调配 色 是 以 色调 配 图 中 相 邻 或 接近 的 两 个 或 两 个 以 上 色调 搭配 在 一 起 的 配 
， 色 。 类 似 色 调 的 特征 在 于 色调 和 色调 之 间 微 小 的 差异 ， 较 统一 色调 有 变化 ， 不 易 产生 果 潜 感 。 : 
”> 对 比 色调 配色 。 对 比 色调 配色 是 指 相隔 较 远 的 两 个 或 两 个 以 上 的 色调 搭配 在 一 起 的 配色 。 对 
: 比 色调 配色 在 配色 选择 时 ,会 因 纵向 或 横向 对 比 有 明度 及 彩 度 上 的 差异 ， 比 如 : 浅 色 调和 深 | 
色调 配色 ， 即 为 深 与 浅 的 明暗 对 比 。 
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4) 无 彩色 的 调和 配 


无 彩色 的 色彩 个 性 并 不 明显 ， 将 无 彩色 与 任何 色彩 搭配 都 可 以 取得 调和 
与 无 彩色 搭配 ， 可 以 传达 出 一 种 经 典 的 永恒 美感 ， 将 无 彩色 与 有 彩色 搭配 ， 
来 调和 色彩 间 的 关系 。 


因此 ， 在 设计 新 媒体 界面 时 ， 为 了 达到 某 种 特殊 的 效果 ， 或 者 突显 出 某 


的 色彩 效果 。 通 过 无 彩色 
可 以 用 其 作为 主要 的 色彩 


个 特殊 的 对 象 ， 可 以 尝试 


通过 无 彩色 调和 配色 来 对 设计 的 画面 进行 创作 。 如 图 1-32 所 示 为 某 服装 网 店 详 页 。 


使 用 无 彩色 作为 画面 
背景 和 辅助 文字 的 颜 
色 ， 而 主体 则 使 用 有 
彩色 ， 这 样 的 配色 让 
商品 的 细节 和 主题 文 
字 更 加 突出 


图 1-32 无 彩色 的 调和 配色 


了 | 新 媒体 美工 文字 设计 


在 设计 新 媒体 界面 时 ， 文 字 的 表现 与 商品 展示 同等 重要 ， 它 可 以 对 商品 


、 活 动 、 服 务 等 信息 及 时 


进行 说 明和 指引 ， 并 且 通 过 合理 的 设计 和 编排 ， 让 信息 的 传递 更 加 准确 。 本 节 将 对 网 店 装 修 中 的 文字 


设计 和 处 理 进 行 详细 讲解 。 


1.2.1 常见 的 字体 风格 


当 我 们 进入 一 个 新 媒体 界面 时 ， 你 是 否 会 有 意 或 者 无 意 地 留意 到 属于 这 个 界面 的 特定 的 字体 设计 


或 者 使 用 ， 从 而 影响 到 你 对 这 个 界面 最 直观 的 感受 ， 是 精致 、 优 雅 、 科 幻 、 古 3 


或 者 是 觉得 粗 米 难看 昵 ? 


字体 风格 形式 多 变 ， 如 何 利用 文字 进行 有 效 的 设计 与 运用 ， 是 把 握 字 体 更 改 最 为 关键 的 问题 。 当 
对 文字 的 风格 与 表现 手法 有 了 详细 的 了 解 后 ， 便 能 有 助 于 我 们 进行 字体 设计 。 在 新 媒体 设计 中 ， 常 见 


的 字体 风格 有 线 型 、 手 写 型 、 书 法 型 、 规 整 型 等 ， 不 同 的 字体 可 以 表现 出 不 
1. 线 型 字体 
线 型 字体 是 指 文字 笔画 的 每 个 部 分 的 宽窄 都 相当 ， 表 现 出 一 种 简洁 、 明 


同 的 风格 。 


快 的 感觉 ， 在 新 媒体 界面 


设计 中 较为 常用 。 常 用 的 线 型 字体 有 “方正 细 圆 简体 ”“ 幼 圆 ”“ 方 正 兰亭 超 细 黑 简体 ”等 ， 如 


图 1-33 所 示 。 
2. 手写 型 字体 


手写 型 字体 是 一 种 使 用 硬笔 或 者 软 笔 纯 手工 写 出 的 文字 。 手 写 型 字体 


代表 了 中 国 汉字 文化 的 精 


髓 。 这 种 手写 体 文字 ， 大 小 不 一 、 形 态 各 异 ， 在 计算 机 字库 中 很 难 实现 错落 有 致 的 效果 。 手 写 型 字体 
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的 形式 因 人 而 异 ， 带 有 较为 强烈 的 个 人 风格 。 

在 进行 新 媒体 设计 时 使 用 手写 型 字体 ， 可 以 表现 出 一 种 不 可 模仿 的 随意 性 和 不 受 局 限 的 自由 性 ， 
有 时 为 了 迎合 画面 整个 的 设计 风格 ， 适 当地 使 用 手写 型 字体 ， 可 以 让 新 媒体 广告 的 主题 表现 得 更 加 淋 
漓 尽 致 ， 如 图 1-34 所 示 。 


以 纤细 的 线条 来 修饰 画面 中 的 矩 
形 ， 通 过 线 型 字体 与 之 相配 ， 突 显 
出 文字 精致 、 简 洁 的 视觉 效果 ， 两 
者 之 间 风 格 一 致 ， 给 人 留 下 明快 、 
高 端的 印象 


图 1-33 线 型 字体 


随意 的 手写 型 字体 加 


应 李 新 品 上 市 搞 寻 写 外 


全 场 谐 减 再 优惠 
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图 1-34 手写 型 字体 


3. 书法 型 字体 
书法 型 字体 ， 就 是 书法 风格 的 分 类 。 书 法 型 字体 ， 传 统 来 讲 共 有 行书 字体 、 草 书 字体 、 隶 书 字 
体 、 篆 书 字 体 和 楷书 字体 5 种 ， 也 就 是 5 个 大 类 。 在 每 一 大 类 中 又 细 分 若干 小 的 门类 ， 如 篆书 又 分 大 
篆 、 小 繁 ， 楷书 又 有 魏 碑 、 唐 楷 之 分 ， 草 书 又 有 章 草 、 今 草 、 狂 草 之 分 。 
书法 型 字体 是 中 国 独 有 的 一 种 传统 艺术 ， 字 体外 形 自由 、 流 畅 ， 且 富有 变化 ， 笔 画 间 会 显示 出 酒 脱 
和 力道 ， 是 一 种 传神 的 精神 境界 。 在 设计 新 媒体 广告 时 ， 为 了 契合 活动 的 主题 ， 或 者 是 配合 商品 的 风格 ， 
很 多 时 候 使 用 书法 型 字体 可 以 让 画面 中 文字 的 外 形 设计 感 增强 ， 表 现 出 独特 的 韵味 ， 如 图 1-35 所 示 。 
画面 是 “日 式 和 风 ” 饭 硫 的 商品 


详情 页 ， 在 设计 时 使 用 了 书法 型 |< | 他 
字体 进行 表现 ， 颇 有 美感 


图 1-35 书法 型 字体 
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4 . 规整 型 字体 

规整 型 字体 是 指 利用 标准 、 整 齐 外 形 的 字体 ， 可 以 表现 出 一 种 规整 的 感觉 。 这 样 的 字体 也 是 新 媒 
体 设计 中 较为 常用 的 字体 ， 它 能 够 准确 、 直 观 地 传递 出 产品 的 信息 。 

在 设计 新 媒体 广告 界面 时 ， 利 用 规整 型 字体 ， 通 过 调整 字体 间 的 排列 间隔 ， 结 合 不 同 长 短 的 文 
字 ， 可 以 很 好 地 表现 出 画面 的 节奏 感 ， 给 人 留 下 大 气 、 端 正 的 印象 ， 如 图 1-36 所 示 。 


TREE 


型 字体 ， 工 整 的 文字 可 以 让 信息 传递 | 
更 准确 、 及 时 ， 也 让 读者 有 舒适 的 阅 


读 感受 


第 6 个 ; 隐 有 才华 气 自 本 .已 有 技法 手 不 民 ,手机 相 不 
的 拍 出 大 片 ,手机 的 好 与 十 其 次 ， 炙 球 知 名 的 多 与 
少 - 宕 与 浅 才 是 主要 的 ， 因 此 ,多 学 习 措 有 技 I 队 过 


天 商 档 于 机 - 
Am 


Sh 


图 1-36 规整 型 字体 


1.2.2 ”文字 的 编排 规则 


为 了 让 新 媒体 界面 布局 变 得 更 有 条 理 ， 同 时 提高 整体 内 容 的 表述 力 ， 从 而 有 利于 用 户 进行 有 效 的 
阅读 以 及 接受 其 主题 信息 ， 在 设计 时 还 需要 考虑 整体 编排 的 规整 性 ， 并 适当 加 入 带 有 装饰 性 的 设计 元 
素 ， 用 来 提升 画面 美感 ， 让 文字 编排 更 加 具有 设计 感 。 

要 做 到 这 些 要 求 ， 必 须 深 入 了 解 文字 编排 规则 ， 即 文字 描述 必须 符合 版 面 主题 的 要 求 、 段 落 排 列 
的 易 读 性 以 及 整齐 布局 的 审美 性 。 

1. 文字 描述 符合 版 面 主题 

在 新 媒体 设计 中 ， 文 字 编排 不 但 要 达到 表达 主题 内 容 的 要 求 ， 其 整体 排列 风格 还 必须 要 符合 设计 
对 象 的 形象 ， 才 能 保证 版 面 文字 能 够 准确 无 误 地 传达 出 信息 ， 如 图 1-37 所 示 。 


17 | 微 信封 号 | 妖 猫 传 预告 


关 沼 推荐 热点 视频 长 沙 电影 十 
测 测 你 的 信用 能 领 10 万 吗 ?| 才 你 要 选 更 好 的 
平台 


在 头条 号 广告 界面 中 ， 简 洁 醒 目的 白 胃 

色 红 边 主题 字 摆 放 在 画面 正中 间 ， 让 4 入 

用 户 一 眼 可 以 看 明白 广告 的 内 容 ， 并 测 测 你 的 革 生 度 但 
且 采 用 黄色 的 背景 ， 让 整体 更 加 鲜艳 能 领 和 

夺目 了 


和 
图 1-37 准确 性 的 文字 编排 
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2. 段落 排列 的 易 读 性 

在 界面 的 文字 编排 设计 中 ， 易 读 性 是 指 通 过 特定 的 排列 方式 使 文字 能 带 给 顾客 更 好 的 阅读 体验 ， 
让 顾客 阅读 起 来 更 加 顺 遂 、 流 畅 。 

在 实际 的 新 媒体 设计 过 程 中 ， 可 以 通过 宽松 的 文字 间隔 、 设 置 大 号 字体 、 多 种 不 同 字体 进行 对 比 
阅读 等 方式 ， 让 段落 文字 之 间 产 生 一 定 的 差异 ， 使 得 文字 信息 主 次 清晰 ， 能 够 增强 文字 的 易 读 性 ， 从 
而 让 用 户 更 快 地 抓 住 商品 广告 的 重点 信息 ， 如 图 1-38 所 示 。 


IT 


02 
将 版 面 中 的 部 分 文字 设 定 为 大 号 字 ype 
理 不 易 与 不 同 ， 
体 ， 并 配 以 适当 的 间距 ， 同 时 使 用 序 |< ”| 不 要 只 用 自己 的 世界 观看 世界 
号 来 对 文件 的 信息 进行 分 割 ， 使 得 它 
pe 年 轻 的 时 候 思想 很 极端 ,与 自己 不 一 
们 的 阅读 性 得 到 提高 ， 同 时 让 用 户 便 edocs eb 
于 掌握 重要 信息 对 方 声 晴 力 间 的 争吵 。 但 花花 世界 什 
么 人 都 有 ， 不 是 别人 错 了 ,而 是 你 固 
守 着 自己 的 价值 观 不 肯 松 手 。 


人 各 有 志 ， 每 个 人 的 想法 因为 各 自 环 
境 背 景 的 不 同 有 着 巨大 差异 ， 理 解 别 
人 的 不 同和 不 易 ， 才 能 让 自己 的 内 心 
更 丰富 ， 而 不 是 极端 又 刻薄 。 


03 
山 不 转 水 转 ， 同 事 之 间 别 作 显 


无 论 是 对 领导 ， 还 是 对 自己 的 下 属 ， 
别 因为 任何 原因 去 作 吐 ， 山 不 转 水 

转 ， 都 是 一 个 圈子 里 的 ， 除 非 你 未 来 
远离 工作 , 远 赴 他 乡 ， 否 则 多 少年 后 


图 1-38 易 读 性 的 文字 编排 
3. 整齐 布局 的 审美 性 
对 新 媒体 界面 来 说 ， 页 面 的 美感 是 所 有 设计 工作 中 不 可 或 缺 的 重要 因素 。 整 齐 布局 的 审美 性 就 是 
指 通过 事物 的 美感 来 吸引 顾客 ， 使 其 对 画面 中 的 信息 和 商品 产生 兴趣 。 
在 字体 编排 方面 ， 设 计 者 可 以 对 字体 本 身 添加 一 些 带 有 艺术 性 的 设计 元 素 ， 从 结构 上 增添 它 的 美 
感 ， 如 图 1-39 所 示 。 


图 中 网 店 的 首页 设计 
中 ， 通 过 添加 可 爱 的 设 
计 元 素 ， 将 其 与 单一 的 
文字 组 合 在 一 起 ， 利 用 
位 置 的 巧妙 安排 ， 增 强 
其 趣味 性 ， 也 提升 了 整 
个 文字 的 艺术 性 


图 1-39 整齐 布局 的 审美 性 
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E 玫 下 新 媒体 美工 版 式 设计 


在 网 店 的 运营 过 程 中 ， 可 以 通过 制作 美观 、 适 合 商品 的 页 面 ， 达 到 吸引 顾客 、 提 高 销售 业绩 的 效 
果 ， 而 关键 之 处 就 在 于 装修 设计 的 版 式 布局 。 


1.3.1 常见 的 版 式 布局 


在 设置 一 个 新 媒体 界面 时 ， 通 常 包含 了 太 多 的 元 素 ， 这 些 元 素 的 布局 没有 固定 的 章法 可 循 ， 主 
要 靠 设计 师 的 灵活 运用 与 搭配 。 只 有 在 大 量 的 设计 实践 中 熟练 运用 ， 才 能 真正 理解 版 式 布 局 设计 的 原 
则 ， 并 加 以 运用 ， 从 而 创作 出 优秀 的 新 媒体 广告 作品 。 

1. 对 称 与 均衡 

对 称 又 称 “ 均 齐 ”， 是 在 统一 中 求 变 化 ; 均衡 则 侧重 在 变化 中 求 统一 。 

对 称 的 图 形 具 有 单纯 、 简 洁 的 美感 ， 以 及 静态 的 安定 感 。 对 称 给 人 以 稳定 、 沉 静 、 端 庄 、 大 方 的 
感觉 ， 产 生 秩序 、 理 性 、 高 贵 、 静 穆 之 美 。 对 称 的 形态 在 视觉 上 有 安定 、 自 然 、 均 匀 、 协 调 、 整 齐 、 
和 典雅、 庄重、 完美 的 朴素 美感 ， 符 合 人 们 通常 的 视觉 习惯 。 

均衡 的 形态 设计 让 人 产生 视觉 与 心理 上 的 完美 、 宁 静 、 和 谐 之 感 。 静 态 平衡 的 格局 大 致 是 由 对 称 
与 均衡 的 形式 构成 。 均 衡 结构 是 一 种 自由 稳定 的 结构 形式 。 一 个 画面 的 均衡 是 指 画 面 的 上 与 下 、 左 与 
右 实现 面积 、 色 彩 、 重 量 等 的 大 体 平衡 。 

在 画面 上 ， 对 称 与 均衡 产生 的 视觉 效果 是 不 同 的 ， 前 者 端庄 静 穆 ， 有 统一 感 、 格 律 感 ， 但 如 过 分 
均等 就 易 显 呆板 ， 后 者 生动 活泼 ， 有 运动 感 ， 但 有 时 因 变 化 过 强 而 易 失衡 。 因 此 ， 在 设计 中 要 注意 把 
对 称 、 均 衡 两 种 形式 有 机 地 结合 起 来 灵活 运用 ， 如 图 1-40 所 示 。 


贴心 高 脚 防 透 设计 
再 热 也 不 怕 租 手 啦 ! 


该 商品 的 详情 页 面 中 使 用 左右 
对 称 的 形式 进行 设计 ， 但 不 是 
绝对 的 对 称 ， 画 面 中 的 布局 在 
基本 元 素 的 安排 上 赋予 规律 的 
变化 ， 对 称 均衡 ， 更 灵活 、 更 
生动 ， 是 设计 中 较为 常用 的 表 
现 手 段 ， 具 有 现代 感 的 特征 ， 
也 让 画面 中 的 商品 细节 与 文字 
搭配 显得 更 自然 和 谐 


灵动 弧度 /不 有 跑 /更 安全 . 


图 1-40 ”对 称 与 均衡 的 布局 表现 形式 
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Re) ”对 称 与 均 生 是 一 切 设计 艺术 最 为 普 这 的 表现 形式 之 一 。 对 称 构成 的 造型 要 素 具 
专家 指 上 -> 有 稳定 感 、 庄 重 感 和 整齐 的 美感 ， 它 属于 规则 式 的 均衡 的 范畴 ; 均衡 也 称 平衡 ， 它 


不 要 中 四 线 和 中 心 点 的 限制， 没有 对 称 的 结构 ， 但 有 对 称 的 重心 ， 主 要 是 指 自 然 式 均衡 。 


在 设计 中 ， 均 衡 不 等 于 均等 ， 而 是 根据 景观 要 素 的 材质 、 色 彩 、 大 小 、 数 量 等 来 判断 视觉 上 的 平 
衡 ， 这 种 平衡 带 来 的 是 视觉 上 的 和 谐 。 对 称 与 均衡 是 把 无 序 的 、 复 杂 的 形态 组 构成 秩序 性 的 、 视 觉 均 
衡 的 形式 美 。 

常用 的 版 式 布 局 的 对 齐 方式 有 左 对 齐 、 右 对 齐 和 居中 对 齐 ， 这 些 对 齐 方式 各 自 具体 的 特点 如 下 。 

(1) 左 对 齐 。 左 对 齐 的 排列 方式 有 松 有 紧 ， 有 虚 有 实 ， 具 有 节奏 感 ， 如 图 1-41 所 示 。 


右 图 为 微 博 广 告 设计 


解 类 
图 ， 文 字 使 用 左 对 齐 


的 方式 排列 ， 与 人 物 
的 动作 互相 弥补 ， 使 有 多 诈 物 
版 面 整体 上 具有 很 强 


的 节奏 感 


图 1-41 左 对 齐 布 局 
(2) 右 对 齐 。 右 对 齐 的 排列 方式 与 左 对 齐 刚 好 相反 ， 具 有 很 强 的 视觉 性 ， 适 合 表现 一 些 特殊 的 
画面 效果 ， 如 图 1-42 所 示 。 


左 图 为 微 博 闪 屏 广 告 图 ， 
其 文字 与 设计 元 素 都 使 用 
右 对 齐 的 方式 ， 整 个 画面 
的 视觉 中 心 向 右 偏 移 ， 让 
人 们 的 视觉 集中 在 下 方 的 
产品 上 ， 并 且 整 个 色调 搭 
配 和 谐 ， 给 人 舒适 的 视觉 
感受 


图 1-42 ” 右 对 齐 布 局 


se 


(3) 居中 对 齐 。 是 指 让 设计 元 素 以 中 心 轴线 为 对 称 中 心 的 对 齐 方式 ， 可 以 让 顾客 视线 更 加 集 
中 ， 具 有 庄重 、 优 雅 的 感觉 ， 如 图 1-43 所 示 。 


ull 1a6ksO O 


如 左 图 所 示 的 今日 
头条 闪 屏 广告 ， 文 
字 与 设计 元 素 都 使 
用 居中 对 齐 的 方 
式 ， 给 人 带 来 视觉 
上 的 平衡 感 


图 1-43 居中 对 齐 布局 
2. 节奏 与 韵律 
节奏 与 韵律 是 物质 运动 的 一 种 周期 性 表现 形式 ， 是 有 规律 的 重复 、 有 组 织 的 变化 现象 ， 是 艺术 造 
型 中 求 得 整体 统一 和 变化 ， 从 而 形成 艺术 感染 力 的 一 种 表现 形式 。 葛 律 是 通过 节奏 的 变化 来 产生 的 。 
对 版 面 来 说 ， 只 有 在 组 织 上 符合 某 种 规律 并 具有 一 定 的 节奏 感 ， 才 能 形成 某 种 韵律 。 
在 网 店 的 装修 设计 中 ， 合 理 地 运用 节奏 与 韵律 ， 才 能 将 复杂 的 信息 以 轻松 、 优 雅 的 形式 表现 出 
来 ， 如 图 1-44 所 示 。 


在 右 图 的 今日 头条 广告 图 中 ， 

3 幅 图 片 的 色彩 和 布局 统一 ， 卫 问答 图 片 科技 汽车 体育 财 丝 十 
相同 形式 的 构图 体现 出 画面 的 机 有 推荐 | 4 年 开 店 近 两 酝 家 ， 

韵律 感 ， 而 每 个 画面 中 的 文字 和 下 加 

形态 和 内 容 又 各 不 相同 ， 这 样 es 
又 表现 出 节奏 上 的 变化 ， 让 广 Sy 

告 信息 的 展示 显得 更 加 轻松 


图 1-44 节奏 与 韵律 的 版 面 布局 表现 形式 

3. 对 比 与 调和 

从 文字 含义 上 分 析 ， 对 比 与 调和 是 一 对 充满 矛盾 的 综合 体 ， 但 它们 实质 上 却 是 相辅相成 的 统一 
体 。 在 新 媒体 广告 设计 中 ， 画 面 中 的 各 种 设计 元 素 都 存在 着 相互 对 比 的 关系 。 但 为 了 找到 视觉 和 心理 
上 的 平衡 ， 设 计 师 往往 会 在 不 断 的 对 比 中 寻求 能 够 相互 协调 的 因素 ， 让 画面 同时 具备 变数 与 和 谐 的 审 
美 情 趣 。 

(1) 对 比 。 对 比 是 差异 性 的 强调 。 对 比 的 因素 存在 于 相同 或 相 异 的 性 质 之 间 ， 也 就 是 把 相对 的 
两 要 素 互 相 比较 之 下 ， 产 生 大 小 、 明 暗 、 黑 白 、 强 弱 、 粗 细 、 朴 密 、 高 低 、 远 近 、 动 静 、 轻 重 等 对 比 
关系 。 对 比 的 最 基本 要 素 是 显示 主 从 关系 和 统一 变化 的 效果 ， 如 图 1-45 所 示 。 


新 媒体 美工 设计 人 门 


圣诞 节 ,礼物 和 情话 在 一 起 才 更 配 哦 加 ! 来 ,办 
和 到 号 


时 和 等 


左 图 如 为 菜 微 博 的 广告 主 
图 ， 画面 中 的 绿色 图 片 布 满 
四 周 , 而 红色 最 醒目 的 一 
张 ， 放 在 画面 正中 间 ， 与 绿 
色 的 主 图 产生 了 鲜明 的 对 
比 。 但 是 两 种 颜色 的 纯度 与 
明度 都 不 高 ， 又 让 画面 显得 
和 谐 、 统 一 


PK 一 下 ， 谁 的 情话 更 动听 ? 加 


二 Re 二 
图 1-45 对 比 布局 的 表现 形式 


(2) 调和 。 调 和 是 指 适合 、 和 舒适、 安定 、 统 一 ， 是 近似 性 的 强调 ， 是 两 者 或 两 者 以 上 的 要 素 之 
间 具 有 的 共性 ， 如 图 1-46 所 示 。 


本 
你 的 #2018 心 愿 清单 # 是 什么 ?我 的 心愿 是 明年 瘦 
10 斤 芒 ,转发 本 博 并 说 出 你 的 新 年 心愿 或 者 对 | 
的 期 待 ， 抽 1 位 幸运 粉丝 送 价 值 500 元 的 VIP 超 级 年 
卡 包 ,让 你 365 天 畅快 追 剧 、 任 性 听 歌 1 最 
_ - i 、EEF4E 
画面 中 所 有 的 主 图 上 背景 颜色 ER 二“ 本 
都 是 一 样 的 ， 让 画面 看 起 来 Gd tt 
很 和 谐 ， 但 是 主 图 的 主体 又 国友 
各 自 有 所 不 同 ， 也 让 画面 产 Ee- se 
生 了 适当 的 对 比 四 和 | 一 
二 负 高 公 乔 起 和 Wy 
a 
个 人 in 元 
1 
Te Te Bs 
一 人 局 
巴 229 日 159 四 57 


图 1-46 ”调和 布局 的 表现 形式 


对 比 与 调和 是 相辅相成 的 ， 在 网 店 的 版 面 构成 中 ， 一 般 整体 版 面 宜 采 用 调和 ， 局 部 版 面 宜 采 用 


对 比 。 


4 . 重复 与 交错 
在 网 店 的 版 面 布局 中 ， 不 断 重 复 使 用 相同 的 基本 形象 ， 它 们 的 形状 、 大 小 、 方 向 都 是 相同 的 。 重 
复 使 设计 产生 安定 、 整 齐 、 规 律 的 统一 。 


但 如 


外 复 构成 后 的 视觉 感受 有 时 容易 显得 呆板 、 平 淡 、 缺 乏 趣味 性 。 因 此 ， 我 们 在 版 面 中 可 安排 一 


些 交 错 与 重合 ， 打 破 版 面 呆板 、 平 淡 的 格局 。 
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5. 虚实 与 留 白 
虚实 与 留 白 是 网 店 的 版 面 设计 中 重要 的 视觉 传达 手段 ， 主 要 用 于 为 版 面 增添 灵气 和 制造 空间 感 。 
两 者 都 是 采用 对 比 与 衬托 的 方式 将 版 面 中 的 主体 部 分 烘托 出 来 ， 使 版 面 结构 主 次 更 加 清晰 ， 同 时 也 能 
使 版 面 更 具 层 次 感 。 

任何 形体 都 具有 一 定 的 实体 空间 ， 而 在 形体 之 外 或 形体 背后 呈现 的 细弱 或 腾 胱 的 文字 、 图 形 和 色 
彩 就 是 虚 的 空间 。 实 体 空间 与 虚 的 空间 之 间 没 有 绝对 的 分 界 ， 画 面 中 每 一 个 形体 在 占据 一 定 的 实体 空 
间 后 ， 常 常 需要 利用 一 定 的 虚 的 空间 来 获得 视觉 上 的 动态 与 扩张 感 。 版 面 虚实 相生 ， 主 体 得 以 强调 ， 
画面 更 具 连 贯 性 。 
中 国 传统 美学 上 有 “ 计 白 守 黑 ”这 一 说 法 ， 就 是 指 编排 的 内 容 是 “ 黑 ”， 也 就 是 实体 ， 斤 斤 计较 
的 却 是 虚实 的 “ 白 ”， 也 可 为 细弱 的 文字 、 图 形 或 色彩 ， 这 要 根据 内 容 而 定 。 

留 白 则 是 版 面 中 未 放置 任何 图 文 的 空间 ， 它 是 “ 虚 ” 的 特殊 表现 手法 。 其 形式 、 大 小 、 比 例 决 定 
着 版 面 的 质量 。 留 白 给 人 的 感觉 是 轻松 的 ， 最 大 的 作用 是 引 人 注 意 。 在 排版 设计 中 ， 巧 妙 地 留 白 ， 讲 
究 空白 之 美 ， 是 为 了 更 好 地 衬托 主题 ， 集 中 视线 和 造成 版 面 的 空间 层次 。 
旨 白 的 手法 在 版 式 设计 中 运用 广泛 ， 可 使 版 面 更 富 空间 感 ， 给 人 丰富 的 想象 空间 ， 如 图 1-47 


= 


所 示 。 


| 
图 1-47 虚实 结合 强调 主体 的 版 面 布局 表现 形式 


1.3.2 图片 的 布局 处 理 


在 新 媒体 界面 设计 的 过 程 中 ， 图 片 是 除了 文字 外 的 另 一 个 重要 的 传递 信息 的 途径 ， 也 是 网 络 销 
售 和 微 营 销 中 最 需要 重点 设计 的 一 个 设计 元 素 。 图 片 比 文字 的 表现 力 更 直接 、 更 快捷 、 更 形象 、 更 有 
效 ， 可 以 让 信息 传递 更 简洁 。 

1. 裁剪 抠 图 ， 提 炼 精华 

在 设计 新 媒体 界面 时 ， 大 部 分 图 片 都 是 由 摄影 师 拍摄 的 照片 ， 它 们 在 表现 形式 上 大 都 是 固定 不 变 
的 ， 或 者 是 内 容 上 只 有 一 部 分 符合 装修 需要 ， 此 时 就 需要 裁剪 图 片 或 者 对 图 片 进行 抠 图 处 理 ， 使 它们 
符合 版 面 设计 的 需求 ， 如 图 1-48 所 示 。 
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将 咖啡 杯 从 繁杂 的 背景 中 抠 
取出 来 ， 并 适当 地 组 合 ， 让 
杯子 也 有 了 新 的 含义 ， 让 顾 
客 能 够 对 商品 的 展示 具有 非 
常 积极 的 作用 ， 也 让 商品 的 
外 形 、 特 点 更 加 醒目 ， 避 免 
过 多 的 信息 影响 顾客 的 阅读 


ed 、 » 体验 


十 关注 i 电 的 了 十 关注 


图 1-48 抠 图 并 重新 布局 商品 图 片 
2. 缩放 图 片 ， 组 合 布局 
对 同一 种 商品 照片 的 布局 设计 来 说 ， 如 果 进 行 不 同比 例 的 缩放 ， 也 会 获得 不 同 的 视觉 效果 ， 从 而 
突显 出 不 同 的 重点 。 如 图 1-49 所 示 为 某 女 鞋 的 详情 页 。 


DeTAL otsPLAY | 
在 处 理 图 片 的 过 程 
中 ， 通 过 实 拍照 片 展 
示 商 品 的 整体 效果 
pp | ”| 突显 出 商品 的 外 形 特 
出 商品 的 细节 ， 让 顾客 点 ， 让 顾客 对 商品 的 
对 商品 的 材质 了 解 得 更 注意 更 加 集中 
清楚 ， 真 实地 还 原 商品 
的 质感 ， 更 容易 获得 顾 
客 的 认可 ， 给 人 逼真 的 
触感 


图 1-49 缩放 图 片 进行 组 合 布局 

需要 注意 的 是 ， 新 媒体 界面 设计 与 普通 的 网 页 设计 不 同 ， 它 重点 展示 的 是 商品 本 身 ， 并 宣传 商家 
的 理念 。 因 此 ， 在 设计 过 程 中 ， 适 当地 对 商品 图 像 进行 遮盖 ， 可 以 让 商品 的 特点 得 以 突显 ， 从 而 获得 
顾客 更 多 的 关注 ， 如 图 1-50 所 示 。 


画面 中 的 图 形 将 商品 抠 取 出 
来 ， 并 适当 旋转 隐藏 部 分 图 
像 ， 使 得 主体 商品 在 背景 中 
显得 轮廓 清晰 而 醒目 


图 1-50 适当 隐藏 部 分 商品 图 像 


图 片 和 文字 是 商家 进行 微 信 公众 号 运营 时 的 主要 武器 ， 一 张 合适 的 图 片 
与 有 干货 技巧 的 文章 ， 可 以 吸引 更 多 的 人 来 关注 。 好 的 图 文 设 计 能 给 微 信 公 
众 平 台 的 读者 带 来 愉悦 的 视觉 效果 ， 也 能 有 效 提 高 商家 在 平台 上 的 知名 度 


设计 封面 图 图 片 排版 
设计 信息 长 图 文字 排版 
设计 九宫 格 图 片 视频 排版 
设计 海报 图 片 音频 排版 
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查看 全 文 


构图 大 师 直播 教程 影展 点 评 


p 居 并 新 媒体 图 文 设计 


在 新 媒体 时 代 ， 各 类 信息 都 争先 想 要 进入 消费 者 的 眼中 。 图 片 相对 于 其 他 信息 更 有 优势 ， 而 且 丰 
的 颜色 可 以 让 人 第 一 眼 注意 到 它 。 运 用 适当 的 技巧 来 设计 你 的 图 片 ， 可 以 让 你 的 文章 更 加 出 彩 。 本 
主要 介绍 一 些 新 媒体 的 图 文 设计 方法 。 


tt 


坦 帅 


2.1.1 设计 封面 图 


通常 来 说 ， 封 面 图 会 是 读者 看 到 的 第 一 张 图 片 ， 它 能 否 吸 引 住 读者 ， 是 读者 会 不 会 点 开 链 接 、 了 
解 链接 详情 的 关键 。 如 图 2-1 所 示 为 手机 摄影 构图 大 全 公众 号 的 文章 封面 ， 该 公众 号 以 摄影 构图 为 主 ， 
所 以 图 片 是 一 张 张 非常 精美 的 摄影 作品 ， 吸 引 着 爱好 摄影 的 朋友 驻足 ， 并 点 进去 查看 是 否 还 有 更 多 精 
美的 图 片 。 


身边 小 景 如 何 拍 出 大 片 感 ? 这 6 个 技巧 给 
你 不 一 样 的 摄影 视角 ! 


查看 全 文 查看 全 文 


构图 大 师 。 直播 教程 影展 点 评 弯 ] 。 构图 大 师 。 直播 教程 。 影展 点 评 
图 2-1 手机 摄影 构图 大 全 公众 号 的 文章 封面 
了 解 封面 图 片 的 重要 性 之 后 ， 可 以 尝试 制作 封面 图 。 下 面 以 创 客 贴 为 例 ， 介 绍 制作 封面 图 的 
创 客 贴 是 一 款 非常 简单 的 在 线 平面 设计 工具 ， 如 图 2-2 所 示 。 它 不 需要 下 载 客户 端 ， 可 以 直接 在 
浏览 器 中 编辑 ， 平 台 提供 了 大 量 的 模板 与 图 片 素材 ， 只 要 简单 地 拖 忠 就 可 以 轻松 制作 出 精美 的 图 片 
效果 。 
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极 简 的 平面 生计 工具 


丰 襄 的 模板 极 简 的 得 作 多 失调 协作 


图 2-2 创 客 贴 首 页 
9 STEP 01 进入 创 客 贴 首 页 ， 单 击 “开启 设计 ”按钮 ， 进 入 到 模板 挑选 页 面 ， 如 图 2-3 所 示 。 
社交 媒体 
Ea | 加 
Fe 溃 
手机 海报 朋友 图 间 请 双 


图 2-3 ”模板 挑选 页 面 
9 STEP 02 各 类 模板 根据 使 用 的 场景 进行 划分 ， 每 个 类 别 又 以 不 同 平台 不 同 尺寸 来 划分 。 选 择 好 喜欢 的 
模板 后 ， 按 照 提示 登录 ， 即 可 进入 设计 页 面 ， 如 图 2-4 所 示 。 此 处 选择 的 是 “官方 公众 号 首 图 ”中 的 一 
个 模板 ， 页面 的 左 侧 是 “素材 分 类 区 ”， 中 间 是 “设计 操作 区 ”， 右 侧 则 是 “页 面 管 理 区 ” 


图 2-4 设计 页 面 
© STEP 03 首先 可 以 修改 文字 信息 ， 双 击 文字 ， 即 可 修改 文本 内 容 ， 修 改 时 ， 文 字 会 变 成 黑体 ， 修 改 完 
毕 后 ， 将 鼠标 光标 移 至 方 框 外 单 击 ， 即 可 应 用 修改 ， 字 体 也 会 变 成 模板 原来 使 用 的 字体 。 
9 STEP 04 如 果 对 字体 格式 不 满意 ，@@ 可 以 在 “设计 操作 区 ”上 方 修改 相应 的 格式 ， 久 包括 字体 颜色 、 


字体 、 字 号 、 样 式 、 对 齐 方式 、 字 间距 、 行 间距 、 透 明度 、 复 制 、 删 除 等 。 和 @@ 或 者 单 击 左 例 


体 ”按钮 ，@@ 可 以 在 其 中 挑选 字体 模板 ， 只 需要 单 击 选择 的 字体 ， 字 体 就 会 上 
央 ， 再 修改 文字 信息 即 可 


SEE THE 


] ， 如 图 2-5 所 示 。 
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现在 “设计 操作 


如 中 


剧 石 解放 HJ 


图 2-5 修改 文本 内 容 


理 或 渐变 背景 ， 如 图 2-6 所 示 。 


9 STEP 05 然后 再 修改 背景 图 片 ， 单 击 背景 ， 图 片 变 为 可 编辑 状态 ， 可 在 左 侧 “背景 ”中 挑选 纯色 、 纹 


9 STEP 06 也 可 以 使 用 一 些 图 片 来 作为 背景 ， 单 击 左 侧 “ 素 材 ” 中 的 “图 片 ” 按 钮 ， 即 可 显示 大 量 的 图 
片 ， 用 户 可 以 从 中 挑选 喜欢 的 图 片 作为 背景 ， 如 图 2-7 所 示 。 


加 


图 2-6 


背景 界面 


图 2-7 图 片 素材 界面 
9 STEP 07 如 果 想 用 自己 已 有 的 图 片 ， 可 以 @@ 单 击 左 侧 的 “上 传 ”按钮 ， 用 电脑 或 者 了 
传 完成 


机 上 传 图 片 ， 上 
后 ，@ 图 片 会 显示 在 左 侧 ， 单 击 上 传 的 图 片 ， 即 可 添加 到 “设计 操作 区 ”， 合 调整 


与 大 小 ， 再 根据 需要 调整 其 他 元 素 的 位 置 ， 即 可 完成 设计 ， 如 图 2-8 所 示 。 


图 片 的 位 置 


Photoshop 
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图 2-8 调整 背景 
9 STEP 08 当 有 新 的 元 素 添 加 至 “设计 操作 区 ”时 ， 会 直接 又 加 在 最 上 方 ， 如 果 要 将 新 元 素 放 置 在 底 


层 ， 可 以 @ 单 击 “ 设 计 操作 区 ”右上 方 的 “图 层 ”按钮 ，@ 在 弹出 的 列表 框 中 可 以 设置 新 元 素 的 图 层 
项 序 ， 如 图 2-9 所 示 。 


CE 


图 2-9 ”移动 图 层 列表 框 
9 STEP 09 如 果 觉得 画面 较 空 ， 也 可 以 试 着 添加 一 些 其 他 元 素 ， 如 线条 、 形 状 、 图 标 等 ， 挑 选 一 些 元 素 
进行 适当 的 组 合 ， 如 图 2-10 所 示 。 如 果 已 经 确定 主题 ， 也 可 以 直接 在 搜索 框 中 搜索 关键 词 ， 即 可 搜索 


到 很 多 相关 内 容 ， 如 图 2-11 所 示 。 


国 回 加 ||: 国 回 国 |: mm 
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图 2-10 < 素 村 界面 图 2-11 “检索 ”界面 
e@STEP 10 制作 完成 后 ， 可 以 @ 单 击 “ 设 计 操 作 区 ”下 方 的 预览 按钮 ， 全 对 封面 图 进行 预览 ， 看 标题 是 
否 会 遮挡 住 封面 图 的 信息 ， 如 图 2-12 所 示 。 但 需要 注意 的 是 ， 只 有 在 编辑 微 信封 面 图 时 才能 预览 。 
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景深 虚 化 拍 大 片 


10 居 境界 从 信 门 天 


通 
MK 
十- 创 窜 贴 在 : 
; 仅 供 预 欧 


四 预览 


图 2-12 预览 微 信封 面 图 
9 STEP 11 确认 无 误 后 ， 单 击 界面 左上 方 的 “文件 ” |“ 保存 ”命令 ， 即 可 将 文件 保存 到 “设计 管理 ” 
中 ， 方 便 以 后 再 次 调用 ， 如 图 2-13 所 示 。 


valentiie's 人 
图 2-13 保存 封面 图 
9 STEP 12 完成 后 可 以 下 载 图 片 保存 到 电脑 中 ，@ 单 击 右 上 方 的 “下 载 ” 按 钮 ， 全 即 可 弹出 “下 载 作 


品 ” 对 话 框 ， 合 设置 需要 的 图 片 格式 后 ， 人 @ 单 击 “ 确 认 下 载 ” 按 钮 ， 如 图 2-14 所 示 。 


图 2-14 下 载 封面 图 

9 STEP 13 如 果 想 要 将 自己 的 作品 分 享 到 其 他 平台 ， 可 以 人 @ 单 击 右 上 方 的 “发 布 分 享 ” 按 钮 ，@ 即 可 弹 
出 “分 享 设计 ”对 话 框 ， 合 并 生成 图 片 链接 ， 复 制 链接 发 布 到 其 他 平台 ,或 者 直接 分 享 至 对 话 框 下 方 
的 三 个 平台 之 一 ， 如 图 2-15 所 示 。 
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信息 图 原本 是 新 闻 编 辑 用 来 对 一 个 新 闻 事 件 的 过 程 进行 解读 的 图 片 ， 但 是 由 于 现在 移动 用 户 的 增 
加 ， 使 得 一 张 图 片 已 经 容纳 不 下 所 有 的 信息 ， 信 息 长 图 应 运 而 生 ， 如 图 2-16 所 示 。 


前 世纪 幼儿 于 
和 江 中 心细 


1 简要 妈 妈 字 党 育儿 村 性 1 节 
2 的 妈 听 香 取 坟 李 


图 2-16 信息 长 图 
信息 长 图 可 以 直接 用 软件 设计 ， 也 可 以 设计 多 张 小 图 后 拼接 起 来 ， 变 成 一 张 长 图 。 下 面 以 创 客 贴 
为 例 ， 介 绍 制作 信息 长 图 的 方法 。 
1. 设计 单 张 的 小 图 再 拼接 
9 STEP 01 具体 设计 小 图 的 步骤 可 以 参考 2.1.1 小 节 中 封面 图 的 设计 ， 全 可 以 在 右 侧 “ 页 面 管理 区 ” 单 击 
底部 的 加 号 ， 和 @ 新 建 并 设计 多 张 图 片 ， 如 图 2-17 所 示 。 
9 STEP 02 设计 完成 后 ， 单 击 “文件 ” |“ 保存” 命令 ， 再 单 击 “下 载 ”按钮 ，@@ 在 弹出 的 “下 载 作品 ” 
对 话 框 中 ，@ 选 中 “无 颖 ” 单 选 按 钮 ， 全 再 单 击 “ 确 认 下 载 ”按钮 ， 如 图 2-18 所 示 ， 即 可 获得 拼接 后 
的 长 图 。 


GE 
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图 2-17 新 建 多 张 图 片 图 2-18 “下 载 作品 ”对 话 框 
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2. 直接 使 用 模板 设计 长 图 
eSTEP 01 挑选 好 模板 后 ， 单 击 进入 编辑 界面 ， 如 图 2-19 所 示 。 


图 2-19 “页 面 管理 区 ”界面 

用 户 可 以 根据 需要 ， 修 改 相应 的 文本 与 图 片 ， 但 是 在 设计 内 容 时 ， 注 意 不 要 有 大 片 的 文字 数据 ， 大 片 
的 文字 容易 带 给 人 一 种 疲倦 的 心理 ， 让 人 没 看 完 就 想 离 开 界面 。 所 以 在 设计 时 ， 如 果 有 大 片 的 文字 数 
据 ， 可 以 尝试 用 图 表 来 表达 ， 形 象 化 的 图 表 不 仅 可 以 让 画面 更 美观 ， 还 可 以 引起 观看 者 的 兴趣 。 
© STEP 02 但 是 创 客 贴 对 图 表 的 可 编辑 空间 不 大 ， 所 以 图 表 将 使 用 “百度 图 说 ” ( http://tushuo.baidu. 
com ) 工具 来 制作 。 进 入 “百度 图 说 ”首页 ， 单 击 “ 开 始 制作 图 表 ” 按 钮 ， 按 提示 登录 ， 再 单 击 “ 创 
建 图 表 ” 按 钮 ， 将 会 弹出 相应 的 对 话 框 ， 在 对 话 框 中 根据 不 同性 质 的 数据 选择 合适 的 图 表 样 式 ， 
如 图 2-20 所 示 。 


图 2-20 不 同 的 图 表 样式 
常用 的 图 表 大 约 为 柱状 图 、 饼 图 和 折线 图 等 。 柱 状 图 适合 表现 数量 的 对 比 ， 饼 图 适合 表现 数据 中 各 项 


参数 的 比例 ， 折 线 图 适合 表现 相等 时 间 间隔 下 数据 的 趋势 走向 。 

© STEP 03 此 处 选择 的 是 “标准 折线 图 ”图 表 样式 。 进 入 图 表 编 辑 界面 ， 当 鼠标 光标 移 至 图 表 中 时 ， 图 表 
左上 方 会 显示 相应 的 按钮 ， 单 击 “ 数 据 编辑 ”按钮 ， 如 图 2-21 所 示 ， 界 面 的 左 侧 会 弹出 “数据 编辑 ” 面 
板 ， 如 图 2-22 所 示 ， 通 过 双击 鼠标 左 键 来 对 表格 名 称 、 数 值 进 行 修改 ， 可 以 直接 影响 折线 图 的 变化 。 
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图 2-21 单 击 “ 孝 据 编辑 ”按钮 图 2-22 ”弹出 “数据 编辑 ”面板 
9 STEP 04 单 击 图 表 左上 方 的 “数据 编辑 ”按钮 ， 在 弹出 的 面板 中 ， 可 以 对 图 表 的 尺寸 、 颜 色 、 位 置 、 
标题 等 细节 进行 相应 的 设置 ， 如 图 2-23 所 示 。 图 表 默 认 是 透明 的 背景 ， 如 果 信息 长 图 的 背景 有 色彩 变 
化 ， 笔 者 建议 将 图 表 的 背景 设置 为 向 色 。 在 “参数 调整 ”面板 中 单 击 “ 基 础 ”|“ 通 用 ”|“ 图 整体 背景 
颜色 ”命令 ， 会 弹出 相应 的 对 话 框 ， 在 对 话 框 中 可 以 设置 需要 的 色彩 。 如 果 对 调整 后 的 色彩 不 满意 ， 
也 可 以 单 击 对 话 框 右 下 角 的 四 按钮 清除 颜色 ， 如 图 2-24 所 示 。 


图 2-23 设置 相应 参数 图 2-24 清除 颜色 

eSTEP 05 图 表 制作 完成 后 ， 单 击 图 表 右 上 方 的 回 图 标 进行 保存 。 进 入 图 表 预 览 ， 在 图 表 中 单 击 鼠标 左 
键 ， 即 可 下 载 图 表 ， 将 下 载 后 的 图 表 上 传 至 “ 创 客 贴 ”， 再 将 图 表 添加 至 信息 长 图 页 面 中 即 可 。 设 计 
完成 后 ， 单 击 “ 文 件 ”|“ 保 存 ” 命 令 ， 再 单 击 “下 载 ”按钮 ， 在 弹出 的 “下 载 作 品 ”对 话 框 中 ， 单 击 
“确认 下 载 ”按钮 ， 即 可 获得 设计 好 的 信息 长 图 。 


2.1.3 设计 九宫 格 图 片 


九宫 格 图 片 是 由 9 个 方 格 形 的 图 片 拼接 组 成 的 ， 根 据 这 一 特性 ， 可 以 制作 出 一 些 有 创意 的 图 片 。 
图 2-25 所 示 为 “小 肥 羊 餐厅 ”的 九宫 格 宣传 海报 。 


如 
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下 面 以 电脑 端的 “ 美 图 秀 秀 ” 为 例 ， 介 绍 制作 九宫 格 图 的 方法 。 


本 地 ”按钮 ， 如 图 2-27 所 示 。 


9 STEP 01 在 “ 美 图 秀 秀 ”中 打开 一 张 需要 制作 九宫 格 的 图 片 ，@ 单 击 “ 更 多 ”标签 ， @ 单 击 “ 九 格 切 
图 ”按钮 ， 如 图 2-26 所 示 。 全 进入 “九宫 格 ” 界 面 ，@ 设 置 相应 的 画笔 形状 与 滤 镜 ， 全 单 击 


“保存 到 


图 2-26 单 击 “ 九 格 切 图 ”按钮 


图 2-27 单 击 “ 保 存 到 本 地 ”按钮 


9 STEP 02 @ 弹 出 “保存 ”对 话 框 ， 合 选中 “保存 9 张 切 图 ” 单 选 按钮 ， 全 单 击 “ 确 定 ” 按 钮 ， 如 
图 2-28 所 示 。 设 置 保存 位 置 后 即 可 保存 图 片 ， 再 次 打开 一 张 图 片 ，@@ 并 适当 裁剪 ， 四 单 击 左 侧 的 


“应 用 ”按钮 ， 应 用 裁剪 ，@ 再 单 击 右 上 方 的 “保存 分 享 


0 @@ 弹 出 


”按钮 ， 如 图 2-29 所 示 。 


图 2-28 单 击 “ 确 定 ” 按 钮 


图 2-29 


单 击 “保存 分 享 ”按钮 


9 STEP 03 @@ 弹 出 “保存 与 分 享 ” 对 话 框 ，@@ 单 击 “ 保 存 ” 按 钮 ， 保 存 图 片 ， 如 图 2-30 所 示 。 将 裁 切 好 


的 图 片 发 送 到 手机 ， 并 按 顺序 单 击 图 片 ， 并 
可 制作 出 九宫 格 图 片 效果 ， 如 图 2-31 所 示 。 


用 裁剪 后 的 图 


片 替 换 “ 4.jpg” 图片， 编辑 并 发 表 ， 和 @@ 即 


re 
EE 和 折 | 抽打 
文 忻 名 与 格式 
usaa |@ 单 击 
和 oan 

图 2-30 单 击 “保存 ”按钮 图 2-31 九宫 格 图 片 效果 
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2.1.4 设计 海报 图 片 

简 拼 是 由 广州 美人 信息 技术 有 限 公 司 于 2014 年 9 月 推出 的 一 款 记录 美好 、 抒 写 情 怀 的 拼图 APP， 其 
模板 偏 简约 文艺 风 ， 并 且 包 含 简 约 、 便 签 、 封 面 、 拼 接 、 名 片 、 明 信 片 等 多 种 类 型 的 模板 。 同 时 ， 简 
拼 还 拥有 强大 的 文字 编辑 功能 ， 让 用 户 可 以 最 大 限度 地 编辑 文字 。 如 图 2-32 所 示 为 简 拼 APP 封 面 及 进 
入 界面 。 下 面 详 细 介绍 使 用 简 拼 APP 设 计 海 报名 片 的 方法 。 

9 STEP 01 进入 简 拼 APP， 什 单 击 界面 下 方 的 回 按钮 ， 如 图 2-33 所 示 。 进 入 到 模板 挑选 界面 ， 四 选择 合 
适 的 模板 并 单 击 ， 如 图 2-34 所 示 。 

9 STEP 02 进入 照片 选择 界面 ， 四 选择 相应 图 片 ，@@ 单 击 “ 下 一 步 ” 按钮 ， 如 图 2-35 所 示 。 进 入 模板 编 
辑 界 面 ， 用 户 可 以 根据 需要 替换 相应 的 图 片 ， 和 @ 单 击 二 维 码 图 片 ， 如 图 2-36 所 示 。 


bs 


人 二 二 
图 2-34 单 击 相应 模板 图 2-35 单 击 “ 下 一 步 ” 按 钮 图 2-36 单 击 二 维 码 图 片 
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专家 指 司 ) 照片 选择 界面 选择 照片 时 ， 建议 不 要 一 次 性 选择 多 张 图 片 。 若是 一 次 
~ Bx 性 选择 了 多 张 图 片 ， 再 单 击 “ 下 一 步 ” 按 钮 ， 如 图 2-37 所 示 ， 在 模板 编辑 界面 则 会 
:出现 三 张 图 片 堆 秋 在 一 起 的 情况 ， 如 图 2-38 所 示 。 


et 


238 图 片 兴 到 在 一 FA 


9 STEP 03 进入 相应 界面 ，@ 提 示 用 户 需 要 先 保存 二 维 码 图 片 ， 并 且 有 相应 的 图 片 教程 ， 保 存 二 维 码 图 
片 后 ， 返 回 简 拼 APP 界 面 ， 全 单 击 界面 底部 的 [按钮 ， 如 图 2-39 所 示 。 合 按 提 示 选 择 并 添加 二 维 码 图 
片 ， 二 维 码 中 心 位 置 会 出 现 一 个 小 方 框 ，@ 单 击 此 方 框 ， 如 图 2-40 所 示 。 


图 2-39 单 击 相 应 按钮 图 2-40 单 击 白色 方 框 
9 STEP 04 将 会 进入 图 片 选择 界面 ， 用 户 可 以 选择 自己 的 头像 图 片 作为 二 维 码 中 心 位 置 的 图 片 ， 也 可 


选择 其 他 图 片 ，@ 按 提示 添加 图 片 ， 合 单 击 界面 底部 的 [图标 ， 如 图 2-41 所 示 。 返 回 模板 编辑 界面 ， 
全 此 时 更 换 好 的 二 维 码 出 现在 画面 中 。 运 用 以 上 同样 的 方法 ，@ 更 换 人 物 的 头像 ， 如 图 2-42 所 示 。 


新 媒体 广告 设计 


修改 ， 如 图 2-43 所 示 。 运 


a 击 相应 文字 ， 


弹出 输入 文本 框 ， 修 改 相应 的 文本 内 容 ， 修 改 完成 后 ，@@ 单 击 B3 按 钮 确认 


如 图 2-44 所 示 。 


报名 片 制作 完成 ， 如 图 2-46 所 示 ， 用 户 也 可 根据 需要 分 享 至 各 大 新 媒体 平台 。 


弹出 3 个 按钮 ， 


同样 的 方法 ， 修 改 其 他 文本 内 容 ， 修 改 完成 后 ， 合 单 击 右上 角 的 加 图 


标 ， 


E: 


单 击 “ 保 存 到 本 地 ”按钮 ， 如 图 2-45 所 示 。 进 入 个 人 主页 ， 人 系统 提示 海 


< Jane/ 简 - 拼 加 


LOGO 是 徽标 或 者 商标 的 外 语 缩写 ， 是 LOGOtype 的 缩写 ， 它 的 存在 ， 可 以 使 拥有 此 商标 的 公司 能 
更 好 地 被 识别 与 推广 ， 并 且 通 过 形象 的 商标 ， 让 消费 者 记 住 公司 主体 和 品牌 文化 。 下 面 以 “ 创 客 贴 ” 


为 例 ， 介 绍 制 作 LOGO 标 志 的 方法 。 
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9 STEP 01 新 建 一 个 空白 的 LOGO 模 板 图 像 ， 单 击 “ 素 材 分 类 区 ”的 “图 形 ” 按 钮 ， 展 开 “ 图 形 ” 面 
板 ， 在 其 中 候选 择 相应 图 形 ，@ 图 形 将 显示 在 画布 中 央 ， 如 图 2-47 所 示 。 


Om om oa im 


图 2-47 显示 图 形 
9 STEP 02 @Q 适 当 缩 小 并 旋转 图 像 ， 移 至 合适 位 置 ，@ 单 击 “ 设 计 操 作 区 ”上 方 的 “复制 ”按钮 ， 全 复 
制图 形 ， 如 图 2-48 所 示 。@ 旋 转 图 像 ， 移 至 合适 位 置 ， 如 图 2-49 所 示 。 


| 缩小 并 放 转 刁 9 


| | 届 | 


图 2-48 复制 图 形 图 2-49 旋转 并 移动 图 形 
9 STEP 03 用 与 上 述 同 样 的 方法 制作 出 其 他 图 形 ， 如 图 2-50 所 示 。@ 选 择 最 上 方 的 图 形 ， 全 单 击 “ 设 计 
操作 区 ”上 方 的 颜色 方块 ， 在 弹出 的 列表 框 中 选择 合适 的 颜色 ， 全 更改 图 形 颜 色 ， 如 图 2-51 所 示 。 


EN snaz OTE 图 cn <sanmaczrsss 


Se 
全 更 改 颜色 

图 2-50 制作 出 其 他 图 形 图 2-51 更 改 图 形 颜 色 
9 STEP 04 人 @ 单 击 “文字 ”按钮 ， 切 换 至 相应 选项 区 ， 和 @@ 单 击 左上 方 的 “添加 标题 文字 ”按钮 ， 回 “ 设 


计 操作 区 ”将 出 现 一 个 文本 框 ， 如 图 2-52 所 示 。 和 @ 修 改 相应 的 文本 ， 并 为 其 设置 不 同 的 格式 ， 如 
图 2-53 所 示 ， 即 可 完成 LOGO 设 计 。 
阐 
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池 / 国 了/ 刻 / 郑 = = 
图 2-52 ”出 现 文本 框 图 2-53 ”修改 相应 的 文本 


当 有 多 个 图 像 在 画面 中 时 ， 移 动 各 个 图 像 ， 画 布 中 会 出 现 一 些 虚线 段 ， 这 些 线 
一 一 :一 一 段 相当 于 PS 中 的 辅助 线 ， 可 以 帮助 用 户 快速 地 找到 合适 的 位 置 : 


2.1.6 ”设计 表单 


表单 在 各 大 新 媒体 平台 中 主要 负责 数据 采集 ， 如 调查 问卷 、 投 票 等 ， 它 一 般 作 为 一 个 有 目的 的 调 
研 活动 ， 所 以 表单 质量 尤为 重要 。 设 计 表单 主要 应 该 考虑 并 明确 两 个 问题 ， 一 是 表单 的 主题 ， 二 是 
过 表单 可 以 获得 的 信息 。 明 确 了 这 两 个 问题 后 ， 还 需要 尽量 体现 在 表单 的 选项 中 ， 确 保 通过 表单 中 所 
有 选项 得 出 来 的 结果 ， 可 以 回答 之 前 的 两 个 问题 ， 则 这 份 表单 就 是 合格 的 。 
麦客 CRM 是 一 款 免费 用 来 对 用 户 信息 进行 收集 管理 以 及 拓展 新 用 户 的 互联 网 表单 工具 ， 用 户 可 以 自己 
轻松 地 设计 表单 ， 收 集结 构 化 数据 ， 轻 松 地 进行 数据 管理 。 下 面 以 麦客 CRM 为 例 ， 介 绍 制 作 表单 的 方法 。 
9 STEP 01 进入 麦客 CRM 首 页 ， 按 提示 注册 、 登 录 后 ，@ 单 击 网 站 顶部 的 “表单 ”按钮 ， 切 换 至 相应 界 
面 ，@ 单 击 右 上 方 的 “创建 表单 ”按钮 ， 如 图 2-54 所 示 。 弹 出 相应 的 对 话 框 ， 俯 用 户 可 以 选择 “空白 模 
板 ” 选 项 ， 新 建 一 个 空白 表单 ， 完 全 由 自己 编辑 ，@ 也 可 以 选择 “更 多 模板 ”选项 ， 如 图 2-55 所 示 。 


Da 


图 2-54 单 击 “ 创 建 表单 ”按钮 图 2-55 选择 “更 多 模板 ”选项 
9 STEP 02 @ 在 右 侧 的 模板 区 中 选取 合适 的 模板 ， 并 单 击 预览 ， 确 认 后 ， 人 @ 单 击 界面 右 下 方 的 “使 用 此 
模板 ”按钮 ， 如 图 2-56 所 示 。 
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图 2-56 单 击 “ 使 用 此 模板 ”按钮 


9 STEP 03 即 可 应 月 


该 模板 ， 进 入 表单 编辑 界面 ， 界 面 左 侧 的 “基础 类 组 件 ” 选 项 
的 各 种 组 件 ， 右 侧 的 “设置 /外 观 ” 选 项 
在 下 方 的 “主题 ”选项 


区 中 包含 了 表单 常 
区 中 则 主要 是 对 整个 表单 进行 设置 ， 包 括 外 观 与 表单 提交 等 ， 
区 中 可 以 设置 表单 的 外 观 ， 如 图 2-57 所 示 。 


图 2-57 表单 编辑 界面 
9 STEP 04 @Q 单 击 表 头 文字 ，@ 右 侧 会 出 现 “ 文 本 描述 ”对 话 框 ， 在 此 对 话 框 中 ， 合 可 以 编辑 表 头 的 文 


本 内 容 ， 如 图 2-58 所 示 。@ 单 击 问卷 题目 ， 右 侧 的 对 话 框 中 会 显示 问题 与 选项 ， 合 在 此 可 以 编辑 问题 
与 选项 内 容 ， 选 项 可 以 根据 需要 增加 或 减少 


， 和 @@ 单 击 右 上 角 的 “预览 ”按钮 ， 如 图 2-59 所 示 。 
有 国 :=* 二 - 一 


击 


图 2-58 ”编辑 表 头 的 文本 内 容 


图 2-59 单 击 “预览 ”按钮 
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所 家 指点 ) 。 在 编辑 选项 时 ， 如 果 此 问题 很 重要 ， 可 以 选中 “这 是 个 必 坟 项 ” 复 选 杠 ， 这 样 
过 从 中 民 问题 不 填写 就 无 法 提交 ， 并 且 问 题 后 面 会 出 现 * 符 号 ， 如 图 2-60 所 示 。 : 


和 件 类 型 。 多 迁 


? 
和 过 何 种 尖 基 了 直到 这 次 直播 活动 ? 


通过 何 神 过 到 了 租 开 广 次 直 反 远 动 ?* 
言 方 网 站 泽 I 扫 着 


boi) 
i 


图 2-60 勾 选 “这 是 个 必 填 项 ” 复 选 框 


9 STEP 05 预览 编辑 后 的 表单 效果 ， 检 查 是 否 还 有 需要 改进 的 地 方 ， 确 认 无 误 后 ，@ 单 击 右 上 角 的 
“关闭 预览 ”按钮 ， 如 图 2-61 所 示 。 返 回 表单 编辑 界面 ， 人 @ 单 击 界面 底部 的 “提交 ”按钮 ， 如 图 2-62 
所 示 。 


器 


图 


活动 满意 度 


通 可 何 js 迫 唐 了 明史 直 生动 了 


区 本 次 堪 动 的 央 些 环节 全 友 > 直 》 


对 证 次 寺 动 名 全 和 各所 如何 ? 


和 有 11 么 夫人 乒 池 对 生 008 


图 2-61 单 击 “ 关 闭 预览 ”按钮 图 2-62 单 击 “ 提 交 ” 按 钮 
9 STEP 06 弹出 相应 的 界面 ，@ 单 击 “ 发 布 表单 ”按钮 ， 如 图 2-63 所 示 ， 即 可 发 布 表 单 ， 人 并 生成 链 
接 ， 用 户 可 以 将 链接 发 布 到 各 大 新 媒体 平台 ， 如 图 2-64 所 示 。 


新 的 表单 


一 切 就 绪 ,可 以 发 布 约 ! 


图 2-63 单 击 “ 发 布 表单 ” 按 钮 图 2-64 生成 表单 链接 


2 章 ”新 媒体 图 文 广告 设计 


了 新 媒体 图 文 排版 


新 媒体 运营 者 在 运营 各 新 媒体 平台 的 过 程 中 ， 都 需要 编写 文章 和 排版 。 运 营 者 可 以 选择 在 各 个 平 
台 的 后 台 进 行文 章 的 编辑 与 排版 ， 因 此 运营 需要 掌握 最 基本 的 后 台 编 辑 、 排 版 的 操作 流程 。 接 下 来 以 
微 信 公 众 号 后 台 文 章 的 编辑 和 排版 为 例 ， 帮 助 大 家 了 解 图 文 排版 的 整个 操作 过 程 。 


2.2.1 图 片 排版 


用 户 在 编辑 图 文 消息 的 时 候 ， 可 选择 编辑 纯 文字 的 内 容 ， 也 可 以 选择 编辑 在 文章 中 插入 图 片 素材 的 内 容 。 
9 STEP 01 在 编辑 正文 时 ， 如 果 用 户 想 要 在 文章 中 插入 图 片 ， 那 么 就 需要 单 击 “素材 库 /新 建 图 文 消息 "” 
页 面 上 最 右边 的 “多 媒体 ”栏目 下 的 “图 片 ”按钮 ， 如 图 2-65 所 示 。 
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图 2-65 单 击 “图 片 ”按钮 
9 STEP 02 全 弹出 “选择 图 片 ”对 话 框 ， 如 果 用 户 的 素材 库 中 有 收藏 过 的 图 片 ， 那 么 用 户 就 可 以 看 见 素 
材 库 中 的 全 部 图 片 。 在 选择 图 片 时 ， 可 以 选择 在 素材 库 中 挑选 ， 也 可 以 选择 本 地 上 传 ， 两 种 方法 都 是 
可 行 的 ， 用 户 根据 自己 的 实际 情况 操作 即 可 。 这 里 选择 从 素材 库 中 挑选 图 片 ， 挑 选 好 需要 的 图 片 后 
人 @ 单 击 该 图 片 ， 全 然后 单 击 页 面 下 方 的 “确定 ”按钮 ， 如 图 2-66 所 示 。 


选择 图 片 二 一 | 


Eo 


Ws 告 设计 


9 STEP 03 执行 此 操作 后 ， 即 可 返回 到 “素材 库 /新 建 图 文 消息 ”页 面 ， 人 @ 在 该 页 面 可 以 看 见 刚才 选 
中 的 图 片 ，@ 单 击 页 面 下方 的 “保存 ”按钮 保存 设置 ， 即 成 功 地 将 图 片 素材 插入 到 文章 中 ， 其 效果 


如 图 2-67 所 示 。 


67 二 于 于 着 和 国 交 素 料 后 的 效 采 用 未 


用 户 可 以 选择 在 文章 中 插入 单 张 图 片 ， 也 可 以 选择 插入 多 张 图 片 可 以 选择 连 
a . 全 插入 儿 瑟 图 片 ， 也 可 以 选择 分 开 手 和 多 张 图片 


2.2.2 ”文字 排版 


用 户 在 微 信 后 台 编 辑 图 文 的 时 候 ， 可 以 设置 图 文 的 字体 格式 ， 让 整体 版 式 更 加 美观 、 有 特色 。 文 
字 排 版 涉及 的 主要 内 容 包括 字号 大 小 、 文 字 是 否 加 粗 、 文 字 是 否 倾斜 、 字 体 颜色 、 对 齐 方式 、 缩 进 方 
式 等 操作 。 接 下 来 为 大 家 介绍 设置 字体 排版 的 操作 过 程 。 
1. 设置 字号 
9 STEP 01 要 设置 字号 大 小 ， 就 需要 进入 到 微 信 公 众 号 后 合 ， 然 后 在 后 台 的 “素材 库 /新 建 图 文 消息 ”页 
面 中 ， 在 已 经 编辑 好 的 图 文 消息 中 选中 要 设置 字体 格式 的 文字 ， 如 图 2-68 所 示 。 


2a-9 三 
加 mr 


10 大 技巧 拍 出 让 人 口水 术 流 的 美 全 大 片 ! 


图 2-68 选中 要 设置 字体 格式 的 文字 
9 STEP 02 单 击 上 方 的 “字号 ”按钮 ，@ 弹 出 相应 的 下 拉 列 表 ， 列 表 框 中 有 8 种 字号 大 小 的 选项 ， 微 信 
公众 号 后 台 的 图 文 消息 的 字号 大 小 默认 为 16px， 这 里 将 字号 设置 为 18px， 所 以 @ 单 击 18px 选 项 ， 如 


公 从 与 妥 


图 2-69 所 示 。 
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图 2-69 单 击 18px 选 项 
9 STEP 03 执行 此 操作 后 ，@ 选 中 的 文字 其 字体 大 小 就 会 变 成 18px 字 号 ，@ 单 击 下 方 的 “保存 ”按钮 保 
存 设置 ， 其 效果 展示 如 图 2-70 所 示 。 
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Er 四 单 击 
图 2-70 将 字号 设置 为 18px 的 效果 展示 


2. 设置 加 粗 
加 选中 文章 中 的 一 段 文字 ，@@ 然 后 单 击 上 方 的 “加 粗 ” 按 钮 ， 如 图 2-71 所 示 。 执 行 此 操作 后 ， 和 @ 该 
段 文 字 的 字体 就 会 被 加 粗 ，@ 单 击 下 方 的 “保存 ”按钮 保存 设置 ， 其 效果 展示 如 图 2-72 所 示 。 


A i 让 全 .四 = 
t 10 大 技巧 ， 拍 出 让 人 口水 横流 的 美食 大 片 ! 10 大 技巧 ， 拍 出 让 人 口水 横流 的 美食 大 片 ! 


em ere Se < 一 一 | 人 @ 单 去 
图 2-71 单 去 “加 粗 ” 按 钮 图 2-72 字体 设置 加 粗 后 的 效果 展示 
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3. 设置 斜体 
@ 选 中 文章 中 的 一 段 文字 ，@ 然 后 单 击 上 方 的 “和 斜体” 按钮， 如 图 2-73 所 示 。 执 行 此 操作 后 ， 全 该 
段 文字 的 字体 就 变 成 倾斜 的 ，@ 单 击 下 方 的 “保存 ”按钮 保存 设置 ， 其 效果 展示 如 图 2-74 所 示 。 


-|| 号 Pa ~ 


10 大 技巧 ， 拍 出 让 人 口水 横流 的 美食 大 片 ! 10 大 技巧 ， 拍 出 让 人 口水 模 流 的 美食 大 片 ! 
@ 单 击 rm 


二 
接 下 境 ， 攀 本 为 大 不作 近 10 大 关 全 村 ， 让 人 的 区 全 际 上 也 在 用 上 五 过 


1， 再 各 曾 浊 : 完 册 二 休 瑞生 


大大 太阳 的 和 一 证 要 学 二 全 入 主人 并 有 仁 和 人 和 行人 向 ， 丰 析 时 天仙 之 出 ,法 扩 把 罗 析 
ER 


下 二 亲 ， 丙 则 亲人 人 本 全 入 天 而， 让 从 风 闪 了 项 和 RU 


wi WE = Gr Ex me 
图 2-73 单 击 “ 儿 体 ”按钮 图 2-74 文字 设置 成 斜体 后 的 效果 展示 
4. 设置 字体 颜色 


选中 文章 中 的 一 段 文字 ，@ 然 后 单 击 上 方 的 “字体 颜色 ”按钮 中 的 倒 三 角 按钮 ， 在 弹出 的 下 拉 列 
表 框 中 有 很 多 种 颜色 ， 用 户 可 以 选择 一 种 自己 最 满意 的 ， 即 可 将 该 段 文字 设置 成 这 个 颜色 ， 这 里 @ 选 
择 了 “#3daad6” 色 号 ， 如 图 2-75 所 示 。 合 这 个 颜色 便 运用 到 该 段 文 家 上， 人 @ 单 击 页 面 下 方 的 “保存 ” 
按钮 保存 设置 ， 其 效果 展示 如 图 2-76 所 示 。 


10 大 技巧 ， 拍 出 让 人 口水 横流 的 美食 大 片 ! 
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下 末 ， 构 为 大计 介 生 10 大 亲信 近 大 和 巧 ， 让 全 折 芝 人 因 上 由 在 腾 友 于 一 实 . 


4 aanratauma< | 加 下 末 ] 


大 大和 +， 首先 宇和 学 白人 主体， 共有 守 革 性 地 尖 行 项， 在 想 大 关 禄 之 前 ,这 反 台 尖 人 
SSE 


; nm : g ama 一 
mr BE = wa se 
图 2-75 ”选择 相应 色 号 图 2-76 设置 文字 颜色 后 的 效果 展示 
a PE 对 大 部 分 公众 号 文章 而 襄 
| | 
文章 的 文字 颜色 是 可 以 随意 设置 的 ， 但 并 不 只 是 单调 的 一 个 色 。 从 读者 的 阅读 效果 出 发 ， 将 | 


文章 中 的 文字 颜色 设置 为 最 佳 的 颜色 是 非常 有 必要 的 。 文 字 的 颜色 搭配 适宜 是 让 文章 拥有 吸引 力 
; 的 一 个 重要 因素 。 


文字 是 一 篇 文章 中 的 一 个 重要 组 成 部 分 ， 它 们 是 读 
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5. 设置 对 齐 方式 
各 选中 文章 中 的 一 段 文字 ， 人 @@ 然 后 单 击 上 方 的 “居中 对 齐 ” 按 钮 ， 如 图 2-77 所 示 。 执 行 此 操作 后 ，@@ 该 
段 文字 的 对 齐 方式 就 会 变 成 了 居中 对 齐 ，@ 单 击 下 方 的 “保存 ”按钮 保存 设置 ， 其 效果 展示 如 图 2-78 所 示 。 
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10 大 技巧 ， 拍 出 让 人 口水 横流 的 美食 大 片 ! 
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入 下 未 ， 构 国 有 为 大 家 介 折 10 大 其 可 沪 巧 ， 让 全 的 半生 由 在 表 万 大 元 、 


大 相隔 关 衣 叶 ， 首 先 一定 要 字 人 亲信 主体 并 有 计划 人 二 和 从 天， 下 的 加 闻 直 区， 击 洛 光 


可 环境 积 玉 要 . 
Sans, erm fess mms 
ua WE “< -一 
图 2-77 单 击 “ 居 中 对 齐 ” 按 钮 图 2-78 文字 设置 成 居中 对 齐 后 的 效果 展示 


6. 设置 缩 进 方式 
人 @ 选 中 文章 中 的 一 段 文字 ，@ 然 后 单 击 上 方 的 “ 首 行 缩 进 ” 按 钮 ， 如 图 2-79 所 示 。 执 行 此 操作 后 ， 
全 该 段 文字 的 段落 就 会 缩 进 两 个 字符 ，@ 单 击 下 方 的 “保存 ”按钮 保存 设置 ， 其 效果 展示 如 图 2-80 所 示 。 


SAE， 


盾 下 于 ， 构 更 入 大大 这 10 大 开 衣 拉 扫 巧 ， 丰 人 


一 < 一 | 人 @ 羊 去 
图 2-80 文字 段落 设置 成 首 行 缩 进 后 的 效果 展示 


图 2-79 单 击 “ 首 行 缩 进 ” 按 钮 


| 所 家 用 点 ) 。 在 流量 短信 公众 号 文章 时 ， 还 应 注意 字符 间距 与 行 间距 。 : 
| 二 家 指点 ， 字符 间距 指 的 是 横向 间 的 字 与 字 的 间距 。 字 符 间 距 的 宽 与 窄 会 影响 到 读者 的 阅 
， 读 感觉 ， 也 会 影响 到 整 篇 文章 篇 幅 的 长 短 。 但 是 在 微 信 公 众 号 的 后 台 ， 并 没有 可 以 调节 字符 间距 
， 的 功能 按钮 ， 所 以 微 信 运 营 者 如 果 想 要 对 公众 平台 上 的 文字 进行 字符 同 距 设置 的 话 ， 可 以 先 在 其 ， 
， 他 编辑 软件 上 编辑 好 ， 然 后 再 复制 粘贴 到 微 信 公 众 平台 的 文章 编辑 栏 中 。 | 
” 。 行 间 距 指 的 是 文字 行 与 行 之 间 的 距离 。 行 间距 的 多 少 决定 了 每 行文 字 间 纵向 间 的 距离 。 行 间 
， 距 的 宽窄 也 会 影响 到 文章 的 篇 幅 长 短 。 在 微 信 公众 号 后 台 群 发 功能 中 的 新 建 图 文 消息 的 图 文 编辑 
” 栏 中 有 行 间距 排版 功能 ， 其 提供 的 可 供 选择 的 行 间距 宽 罕有 7 种 。 i 
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7. 设置 编号 


@ 选 中 文章 中 的 一 段 文字 ，@ 然 后 单 击 上 方 “ 编 号 ” 右 侧 的 下 三 角 按钮 ， 弹 4 
全 选择 第 一 种 编号 ， 如 图 2-81 所 示 。 执 行 此 操作 后 ， 介 该 段 文字 的 前 面 就 会 H 
“保存 ”按钮 保存 设置 ， 其 效果 展示 如 图 2-82 所 示 。 


上 相应 的 下 拉 列 表 ， 
H 现 编号 ， 回 单 击 下 方 的 


@@ 单 击 


2 
Rs 二 Oi 二 
mex BE “=  。 一 - mee mE 
图 2-81 选择 第 一 种 编号 图 2-82 文字 设置 成 有 编号 后 的 效果 展示 


2.2.3 ”视频 排版 

运营 者 
© STEP 01 同 
栏目 下 的 “视频 ”按钮 ， 如 图 2-83 所 示 。 


除了 可 以 在 文章 中 插入 图 片 素材 之 外 ， 还 可 选择 插入 视频 素材 ， 这 样 能 够 使 得 文章 更 生动 。 
样 ， 用 户 需要 在 微 信 公 众 号 后 台 的 “素材 库 /新 建 图 文 消息 ”页 面 ， 单 击 该 页 面 “ 多 媒体 " 
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a a 
人 也 村 
8 as -| 
| 

一 

o 小 


图 2-83 单 击 “视频 ”按钮 


十 家 指 避 ) 如 果 说 文章 中 的 内 容 是 让 作者 与 读者 之 间 产 生 思 想 上 的 碰撞 或 共鸣 的 武器 ， 那 
一 一 人 一， 么 作者 对 文章 的 格式 布局 与 排版 就 是 给 读者 提供 一 种 视觉 上 的 享受 。 文 章 的 排版 对 
。 一 篇 文章 来 说 有 很 重要 的 作用 ， 它 决定 了 读者 是 否 能 够 舒适 地 看 完整 篇 文章 ， 这 种 重要 程度 对 微 
; 信 公 众 平台 上 这 种 以 电子 文档 形式 传播 的 文章 来 说 更 甚 。 
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9 STEP 02 执行 此 操作 后 ， 人 @ 即 会 弹出 “选择 视频 ”页 面 ， 如 在 该 页 面 运 营 者 可 以 看 见 “ 视 频 ”“ 视 
频 网 址 ”“ 小 视频 ”三 个 选项 ， 如 果 运 营 者 的 素材 库 中 已 有 要 上 传 的 视频 素材 ， 那 么 就 可 以 选中 该 视 
频 素材 插入 到 文章 中 ， 如 果 没 有 视频 素材 或 者 没有 合适 的 视频 素材 时 ， 则 可 以 @ 单 击 “ 新 建 视频 ” 按 
钮 ， 如 图 2-84 所 示 。 


LE 


| -= -> 
图 2-84 单 击 “新 建 视频 ”按钮 
9 STEP 03 执行 此 操作 后 ，@ 就 会 进入 到 “添加 视频 ”页 面 ， 运 营 者 在 上 传 视频 时 ， 要 先 看 清楚 该 页 面 
上 所 写 的 对 视频 的 格式 、 大 小 要 求 ，@@ 再 单 击 “ 上 传 视频 ”按钮 ， 如 图 2-85 所 示 。 
全 口 国 J 
添加 视频 加 进入 


柳 . 微 
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图 2-85 ” 单 击 “ 上 传 视频 ”按钮 
9 STEP 04 执行 此 操作 后 ，@ 就 会 弹出 “打开 ”对 话 框 ， 用 户 根 据 需 要 找到 自己 存放 视频 的 文件 夹 ，@ 选 
中 要 上 传 的 视频 ， 全 然后 单 击 “ 打 开 ” 按 钮 ， 如 图 2-86 所 示 。 


图 2-86 单 击 “ 打 开 ” 按 钮 
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9 STEP 05 执行 此 操作 后 ， 即 可 返回 到 “添加 视频 ”页 面 ， 等 视频 上 传 完 之 后 ，@ 填 写 下 方 需 要 的 信 
息 ，@ 并 选中 “我 已 阅读 并 同意 《腾讯 视频 上 传 服务 规则 》” 复 选 框 ， 合 然后 单 击 “ 保 存 ” 按 钮 即 
可 ， 如 图 2-87 所 示 。 


添加 视频 


= 而 [回击 
图 2-87 单 击 “保存 ”按钮 
9 STEP 06 视频 保存 之 后 ， 还 需要 进行 审核 ， 审 核 通 过 ， 视 频 将 显示 在 “选择 视频 ”页 面 中 ， 人 @ 选 中 该 
视频 ，@ 并 单 击 页 面 下 方 的 “确定 ”按钮 即 可 ， 如 图 2-88 所 示 。 


十 条 过 入 纺 


= 


图 2-88 单 击 “ 确 定 ” 按 钮 


pe 视频 形式 传递 微 信 公 众 平台 正文 是 指名 大 商家 可 以 把 自己 要 宣传 的 卖点 拍摄 成 
一 一 > 视频， 发 送 给 广大 用 户 群 。 它 是 当下 很 热门 的 一 种 传递 微 信 公 众 平台 正文 的 形式 。 
。 。 相 比 文字 和 图 片 ， 视 频 更 具备 即 视 感 和 吸引 力 ， 能 在 第 一 时 间 快速 地 抓 住 受众 的 眼球 ， 从 而 
， 达到 理想 的 宣传 效果 。 | 
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@ STEP 07 执行 此 操作 后 ， 即 可 返回 到 “素材 库 /新 建 图 文 消息 ”页 面 ，@ 在 该 页 面 中 可 以 看 见 新 插入 的 
视频 素材 ， 全 单 击 页 面 下 方 的 “保存 ”按钮 ， 即 可 成 功 地 在 文章 中 插入 视频 素材 ， 其 效果 展示 如 
图 2-89 所 示 。 


"|@ 单 二 


图 2-89 ”文章 中 插入 视频 素材 后 的 效果 展示 


2.2.4 音频 排版 


运营 者 如 果 还 想 发 表 一 篇 有 声音 的 文章 ， 那 么 可 以 在 文章 中 插入 以 下 两 种 素材 。 

(1) 音乐 素材 。 

(2) 音频 素材 。 

插入 音乐 素材 、 音 频 素 材 的 方式 会 有 一 些 区 别 。 下 面 为 大 家 分 别 详细 讲解 怎么 插入 音乐 素材 和 音 
频 素材 。 

1. 在 图 文中 插入 音乐 素材 

9 STEP 01 用 户 如 果 要 在 图 文中 插入 音乐 素材 ， 同 样 ， 需 要 进入 到 微 信 公众 号 后 全 ， 然 后 在 后 台 的 “ 素 

材 库 / 新 建 图 文 消息 ”页 面 ， 单 击 该 页 面 “ 多 媒体 ”栏目 下 的 “音频 ”按钮 ， 如 图 2-90 所 示 。 


图 2-90 单 击 “ 音 频 ” 按 钮 
9 STEP 02 执行 此 操作 后 ， 人 @ 即 可 弹出 “选择 音频 ”对 话 框 ， 人 @ 单 击 对 话 框 左上 方 的 “音乐 ”选项 ， 如 


图 2-91 所 示 。 


Photoshop 
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9 STEP 03 切换 至 “音乐 ”对 话 框 ， 在 搜索 栏 中 输入 歌 名 或 者 作者 ， 就 可 以 找到 要 添加 到 图 文中 的 音 
乐 。 这 里 以 在 搜索 栏 中 人 @ 输 入 歌 名 “莲花 ”为 例 ， 歌 名 输 完 之 后 ，@ 单 击 搜索 栏 右面 对 应 的 “搜索 ” 
按钮 ， 如 图 2-92 所 示 。 

wm |@ 弹 出 = 


= | 


= ee ie 入 | 回去 


mm 


图 2-91 单 去 “音乐 ”选项 图 2-92 单 击 “搜索 ”按钮 
9 STEP 04 执行 此 操作 后 ，@ 页 面 上 就 会 出 现 与 歌 名 相关 的 歌曲 ， 全 用 户 可 以 选中 最 符合 自己 要 求 的 一 
首 歌 曲 ， 合 然后 单 击 页 面 下 方 的 “确定 ”按钮 ， 如 图 2-93 所 示 。 


~ 固 单 击 

图 2-93 单 击 “确定 ”按钮 

9 STEP 05 执行 此 操作 后 ， 即 可 返回 到 “素材 库 / 新 建 图 文 消息 ”页 面 ， 在 该 页 面 编辑 的 图 文中 ，@ 用 户 
可 以 查看 刚才 插入 的 音乐 素材 ， 全 然后 单 击 页 面 下 方 的 “保存 ”按钮 ， 即 可 成 功 地 在 图 文中 插入 音乐 
素材 ， 其 效果 展示 如 图 2-94 所 示 。 


EEE] 


ex E |@@ 单 击 
图 2-94 图 文中 插入 音乐 素材 后 的 效果 展示 
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二 家 指 上 除了 在 文章 中 插入 音乐 素材 ， 运 营 者 还 可 以 发 送 语音 。 语 音 形式 传递 微 信 公众 
> 平台 是 指 平台 运营 者 将 自己 想 要 向 读者 传递 的 信息 通过 语音 的 形式 发 送 到 公众 平台 | 


。 上 。 这 种 形式 可 以 拉 近 与 读者 的 距离 ， 使 读者 感觉 更 来 切 。 
语音 和 视频 一 样 ， 微 信 公 众 平台 的 运营 者 可 以 先 将 语音 录 到 电脑 里 ， 然 后 再 在 微 信 公 众 平台 


”进行 上 传 。 


2. 在 图 文中 插入 音频 素材 
介绍 完 在 图 文中 插入 音乐 的 操作 之 后 ， 接 下 来 为 大 家 介绍 怎样 在 图 文中 插入 音频 素材 。 


9 STEP 01 同样 ， 运 营 者 需要 进入 到 微 信 公 众 号 后 合 ， 然 后 在 后 合 的 “素材 库 /新 建 图 文 消息 ”页 面 , 单 
击 该 页 面 “ 多 媒体 ”栏目 下 的 “音频 ”按钮 ， 如 图 2-95 所 示 。 


图 2-95 单 击 “ 音 频 ” 按 钮 
9 STEP 02 执行 此 操作 之 后 ，@ 即 可 弹出 “选择 音频 ”对 话 框 ， 如 果 用 户 的 素材 库 中 已 有 要 上 传 的 语 
音 ， 那 么 就 可 以 选中 该 语音 插入 到 图 文中 ， 如 果 没有 需要 上 传 的 语音 ，@ 则 可 以 单 击 “ 新 建 语音 " 
钮 ， 如 图 2-96 所 示 。 


十 到 如 (12 出 


@ 单 击 


图 2-96 单 击 “ 新 建 语音 ”按钮 
9 STEP 03 执行 此 操作 后 ，@ 即 可 进入 “素材 管理 ”页 面 中 的 “语音 /新 建 语音 ”页 面 ， 估 在 该 页 面 ， 运 
营 者 需要 输入 语音 标题 、 选 择 语音 分 类 ， 合 然后 单 击 该 页 面 上 的 “上 传 ”按钮 ， 如 图 2-97 所 示 。 
9 STEP 04 执行 此 操作 后 ，@ 就 会 弹出 相应 的 “打开 ”页 面 ， 找 到 存放 语音 的 文件 夹 ，@ 选 中 要 上 传 的 


语音 ， 全 然后 单 击 “打开 ”按钮 ， 如 图 2-98 所 示 。 


Photoshop 
新 媒体 广告 设计 


9 STEP 05 执行 此 操作 后 ， 人 @ 即 可 返回 到 “素材 管理 ”页 面 中 的 “语音 /新 建 语音 ” 


页 面 ， 音 频 上 传 成 功 


之 后 ，@ 该 页 面 即 可 显示 该 音频 ， 全 然后 再 单 击 “ 保 存 ” 按 钮 即 可 保存 设置 ， 如 图 2-99 所 示 。 
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图 2-97 单 击 “上 传 ” 按 钮 
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图 2-98 单 击 “打开 ”按钮 
9 STEP 06 执行 此 操作 后 ， 就 会 跳 转 到 “素材 管理 ”页 面 ， 在 “素材 管理 ”页 面 下 的 “音频 ”栏目 里 将 
会 显示 上 传 成 功 的 音频 ， 如 图 2-100 所 示 。 


图 2-99 单 击 “ 保 存 ” 按 钮 


登 , 微 信 公众 平台 


素材 管理 


3 EE 且 


eee 
呈 人 


ES a 
2D17s12 月 29 二 世 自 
2017406 有 "99 土生 


2016108199 上 世面 


图 2-100 


“素材 管理 ”页 面 


第 2 章 ”新 媒体 图 文 广 告 设计 


二 家 指 吕 微 信 平台 运营 者 除了 可 以 运用 上 述 几 种 形式 向 读者 传递 微 信 公众 平台 
一 一 一 一 ”， 外， 还 有 一 种 形式 用 于 传递 平台 正文 也 是 非常 不 错 的， 那 就 是 综合 形式 。 

顾名思义 ， 综 合 形式 就 是 将 上 述 传递 平台 正文 的 4 种 形式 中 的 一 部 分 综合 起 来 ， 运 用 在 一 篇 文 ， 
， 章 里 。 : 
| 这 种 形式 可 谓 是 集 几 种 形式 的 特色 于 一 身 ， 兼 众 家 之 所 长 。 这 种 形式 能 够 给 读者 最 极致 的 阅 
” 读 体验 ， 让 读者 在 阅读 文章 的 时 候 不 会 感觉 到 枯燥 乏味 。 微 信 运 营 者 运用 这 种 形式 传递 微 信 公 众 
”平台 的 正文 也 能 够 为 自己 的 平台 吸引 更 多 读者 ， 提 高 平台 粉丝 的 数量 。 | 
: 需要 注意 的 一 点 是 ， 微 信 公 众 平台 以 综合 形式 向 读者 传递 正文 内 容 并 不 是 指 在 一 篇 文章 中 要 
”出 现 所 有 的 形式 ， 而 是 只 要 包含 3 种 或 者 3 种 以 上 形式 就 可 以 被 称 为 是 以 综合 形式 传递 正文 。 : 


oSsTEP 07 返回 编辑 图 文 消息 页 面 中 ， 单 击 “ 音 频 ” 按 钮 ，@ 然 后 在 弹出 的 “选择 音频 ” 页 面 中 加 选中 
上 传 好 的 语音 ， 合 单 击 “ 确 定 ” 按 钮 即 可 ， 如 图 2-101 所 示 。 


na 加 弹出 


正文 之 


G 直 


图 2-101 单 击 “确定 ”按钮 
9 STEP 08 执行 此 操作 后 ， 即 可 返回 到 “素材 库 /新 建 图 文 消息 ”页 面 ， 在 该 页 面 编辑 的 图 文中 ，@ 会 显 
示 插入 的 语音 素材 。@ 单 击 该 页 面 下 方 的 “保存 ”按钮 ， 即 可 成 功 地 在 图 文中 插入 音频 素材 ， 其 效果 
展示 如 图 2-102 所 示 。 


证 痢 


图 2-102 图 文中 插入 音频 素材 后 的 效果 展示 


短视 频 是 指 在 各 种 新 媒体 平台 上 播放 的 高 频 推送 的 视频 内 容 ， 几 秒 到 几 
分 钟 不 等 ， 具 有 生产 流程 简单 、 制 作 门 槛 低 、 参 与 性 强 等 特点 ， 又 比 直 播 更 
具有 传播 价值 。 现 在 短视 频 已 经 成 为 一 种 火热 的 广告 形式 


gx 
经 


下 载 微 信 文 章 视频 使 用 VUE 
下 载 朋友 圈 视 频 使 用 美 拍 大 师 
下 载 微 博 视频 使 用 快手 


转换 视频 格式 使 用 Camtasia Studio 
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下 载 新 媒体 视频 


随 着 手机 拍摄 功能 的 逐渐 强大 和 网 络 的 不 断 发 展 ， 用 户 已 经 开始 用 视频 去 表达 自己 的 特点 与 优 
势 了 。 现 在 大 部 分 新 媒体 平台 都 支持 视频 的 上 传 。 当 看 到 很 有 用 的 干货 视频 时 ， 也 可 以 把 视频 下 载 保 
存 ， 方 便 以 后 再 看 。 


3.1.1 下 载 微 信 文章 视频 


微 信 现在 已 经 是 亚洲 地 区 最 大 用 户 群 体 的 移动 即时 通信 软件 ， 微 信 的 月 活跃 用 户 数 已 上 亿 。 很 
多 公众 号 运营 者 在 公众 号 中 发 表 各 种 干货 文章 ， 其 中 有 不 少 文章 里 有 视频 。 当 看 见 有 趣 或 有 用 的 视频 
时 ， 可 以 将 视频 下 载 保 存 ， 方 便 以 后 随时 调用 回 看 。 
e@ STEP 01 打开 需要 下 载 视频 的 微 信 文 章 ，@ 单 击 “ 播 放 ” 按 钮 ， 如 图 3-1 所 示 。 进 入 到 视频 播放 界面 ， 
人 @ 单 击 画 面 中 的 视频 ， 合 上 方 会 弹出 相应 的 按钮 ， 人 @ 单 击 “ 缓 存 ” 按 钮 ， 如 图 3-2 所 示 。 


rr 一 和 


时 


图 3-1 单 击 “ 播 放 ” 按 钮 图 3-2 单 击 “ 缓 存 ” 按 馈 
9 STEP 02 四 弹出 相应 的 下 拉 列 表 ， 视 频 的 下 载 由 QQ 浏览 器 提供 ， 在 下 载 视 频 之 前 ， 需 要 先 安装 QQ 浏 
览 器 ， 如 图 3-3 所 示 。 安 装 完 成 后 ， 需 要 再 次 单 击 微 信 文 章 视频 右上 方 的 “缓存 ”按钮 ， 将 会 进入 到 
QQ 浏览 器 ，@ 并 弹出 相应 对 话 框 ， 合 单 击 “ 下 载 ” 按 钮 ， 如 图 3-4 所 示 。 


直接 人行 开 
转 存 到 微 去 


回 单 击 


图 3-4 单 击 “下 载 ” 按 钮 


Photoshop 
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| 点 】 。 如 果 用 户 已 经 安装 了 QQ 浏览 器 ， 则 会 直接 跳 转 到 QQ 浏览 器 ， 并 弹出 相应 的 
对 话 框 。 | 


© STEP 03 即 可 下 载 视频 ， 用 户 可 以 单 击 弹出 的 “ 单 击 查 看 ” 按钮， Pe 文件 下 载 界面 ， @ 吉 看 
正在 下 载 的 视频 ， 如 图 3-5 所 示 。 视 频 下 载 完成 后 ， 用 户 可 以 长 按 下 载 的 视频 文件 ， 界 面 下 方 会 弹出 相 
应 按钮 ， 单 击 “详情 ” 按 钮 ， 全 进入 到 “任务 详情 ”界面 ， 用 户 可 以 查看 到 视频 存储 的 位 置 ， 并 根据 


需要 选择 移动 或 重 命名 ， 如 图 3-6 所 示 。 


[@#A—>x# 图 进 入 上 > 人 5 
我 的 文件 
nN1314a3b431.m701.mp4 
Soese 
82999 
量 近 下 载 
n1314a3b431.m701.mp4 Dn 
4 重 命名 
打开 文件 所 在 目录 
四 查看 
分 享 下 载 链接 
垃圾 清理 > 清空 
a ni led ei elm bi 


[sa 弹出 的 “ 单 击 查看 ” 按 角 会 在 弹出 后 的 几 秒 后 消失 ， 如 果 用 户 没 来 得 及 单 击 查 
一 一， 看, @ 可 以 单 击 浏览 器 下 方 的 三 按钮 ， 如 图 3-7 所 示 。@@ 下 方 会 弹出 相应 列表 ，@@ 单 


击 “文件 下 载 ” 按 钮 ， 如 图 3-8 所 示 ， 即 可 进入 “文件 下 载 ” 界 面 ， 查 看 下 载 任务 。 


图 3-7 单 去 相应 按钮 图 3-8 单 击 “文件 下 载 "按钮 : 
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3.1.2 下载 朋友 圈 视 频 


微 信 公众 号 中 的 视频 有 很 多 ， 但 是 下 载 有 点 烦琐 ， 并 且 只 能 通过 QQ 浏览 器 下 载 视频 。 但 如 果 是 
朋友 圈 的 视频 ， 下 载 起 来 则 要 方便 快捷 很 多 。 下 面 详细 介绍 下 载 朋 友 圈 视频 的 方法 。 
9 STEP 01 全 首先 进入 到 需要 下 载 视频 的 朋友 圈 详 情 界面 ，@@ 单 击 “ 播 放 ” 按 钮 ， 如 图 3-9 所 示 ， 进 入 
播放 界面 ， 全 长 按 视频 画面 ， 如 图 3-10 所 示 。 


狐 


《风流 ) 
风 起 云 酒 ， 百 亲 争 流 。 
这 10 入 的 视频 效果 ， 其 实 是 600 
结果 ,首先 


下 村 


图 3-9 单 击 “ 播 放 ” 按 钮 图 3-10 ”长 按 视频 画面 
9 STEP 02 人 @ 弹 出 相应 的 列表 框 ，@ 单 击 “ 保 存 视频 ”按钮 ， 如 图 3-11 所 示 。 稍 等 片刻 ， 视 频 即 可 下 载 
完成 ， 加 并 显示 视频 存储 的 位 置 ， 如 图 3-12 所 示 。 


图 3-11 单 击 “ 保 存 视频 ” 


3.1.3 ”下载 微 博 视频 


微 博 是 众多 新 媒体 平台 中 比较 


要 的 一 个 ， 每 天 都 有 大 量 的 信息 更 新 ， 其 中 包括 很 多 视频 ， 里 面 也 
介绍 下 载 微 博 视 频 的 方法 。 不 过 在 微 博 平台 是 不 支持 直接 下 载 视频 


不 乏 既 有 趣 又 有 用 的 视频 。 下 面 详 
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的 ， 所 以 在 下 载 视 频 之 前 ， 需 要 先 安 装 UC 浏览 器 ， 通 过 UC 浏览 器 来 下 载 微 博 视 频 。 
@ STEP 01 安装 UC 浏览 器 后 进入 微 博 ，@ 打 开 需 要 下 载 视频 的 微 博 正 文 界面 ， 人 @ 单 击 “ 秒 拍 视频 ” 标 
签 ， 如 图 3-13 所 示 。 进 入 到 秒 拍 视频 网 页 ， 合 单 击 右 上 角 的 … 图标， 如 图 3-14 所 示 。 


各 打开 上 一 > WE 文 2 万 的 和 


的 【圣诞 姜 饼 人 】 ， 再 现 江湖 [ 污 


四 单 击 


图 3-13 单 击 “ 秒 拍 视频 ”标签 图 3-14 单 击 相应 图 标 
9 STEP 02 @Q 界 面 底部 会 弹出 相应 的 列表 ，@ 单 击 “ 浏 览 器 打开 ”按钮 ， 如 图 3-15 所 示 。 全 弹出 “选择 
浏览 器 ”对 话 框 ，@@ 选 择 UC 选 项 ， 回 并 单 击 “ 仅 一 次 ”按钮 ， 如 图 3-16 所 示 。 


选择 浏览 器 


图 3-15 ” 单 击 “浏览 器 打开 ”按钮 图 3-16 选择 浏览 器 


所 家 指点 ) wy 和 全 机 人 生生 选择 浏览 器 时 建议 选择 bm 
一 一 一 一 次” 选 项， 选择 此 选项 ， 每 次 用 浏览 器 打开 链接 时 ， 都 会 弹出 此 对 话 框 ; 如 果 选 择 : 
;的 是 “总 是 ”选项 ， 则 用 浏览 器 打开 链接 时 会 默认 使 用 之 前 选 定 的 浏览 器 打开 ， 如 果 是 需要 使 用 
i 另外 的 浏览 器 打开 的 话 ， 就 需要 在 “设置 ”里 重新 设置 权限 ， 过 程 很 麻烦 。 


9 STEP 03 进入 到 相应 的 网 页 ， 此 时 我 们 可 以 看 到 ， 视 频 的 右上 方 有 下 载 的 图 标 ，@ 单 击 此 图 标 ， 视 频 
将 会 自动 下 载 ，@ 再 单 击 界面 下 方 的 三 图 标 ， 如 图 3-17 所 示 。 合 会 弹出 相应 的 列表 框 ，@ 单 击 “ 我 的 
视频 ”图 标 ， 如 图 3-18 所 示 。 


全 、 时 隔 四 年 的 【圣诞 美 饼 人 】 ,再 更。 全 
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图 3-17 单 击 相应 图 标 


图 3-18 单 击 “ 我 的 视频 


”图 标 


9 STEP 04 进入 个 人 中 心 ，@ 单 击 “ 已 缓存 视频 ”按钮 ， 如 图 3-19 所 示 。@ 进 入 “已 缓存 视频 ”界面 。 


在 此 界面 中 ， 


图 3-19 


户 可 以 全 查看 已 下 载 的 视频 ， 如 图 3-20 所 示 。 


登录 我 的 UC 


“[@¥E| 
(OR 
日 aa 

四 EE 在 


从 我 的 收藏 


CD 根据 你 的 兴起 推荐 


四 四 明日 @ 


《 ”已 缓存 视频 


口 ”手机 中 的 视频 


(我 的 云 播 


有 时限 四 年 的 【 圣 源 半 饼 人】 ， 再 现 
江湖 [ 污 ] 妈 使 不 喜欢 妆 味 的 人 也 


加 查看 


编辑 


四 进入 


3.1.4 转换 视频 格式 


下 载 视频 后 ， 可 
下 面 详细 介绍 转 
9 STEP 01 全 打开 “格式 了 
话 框 ， 在 其 中 可 以 
无 误 后 ，@ 单 击 “ 确 定 ”按钮 ， 妇 


[能 有 一 些 视频 格式 并 不 是 我 们 需要 的 
换 视 频 格式 的 方法 。 转 


@STEP 02 @ 返 


9 


MP4 对 话 框 ，@@ 外 


击 “ 输 出 配置 ”按钮 ，@@ 弹 ! 


图 3-22 所 示 。 


单 击 “ 已 缓存 视频 ”按钮 


图 3-20 查看 已 下 载 的 视频 


， 此 时 可 以 运用 “格式 了 


[三 ”来 转换 视频 格式 。 


[三 ” 软件， 在 左 侧 的 列表 框 
上 “视频 设置 ”对 话 框 ， 查 看 具体 的 格式 参数 ， 确 认 


换 视 频 格式 之 前 需要 先 在 电脑 中 下 载 “ 格 式 工 三” 软件 并 安装 。 


外 选 择 MP4 选 项 ， 如 


受 | 


3-21 所 示 。 弹 出 MP4 对 


件 ， 按 提示 全 添加 文件 后 ，@ 单 击 “确定 ”按钮 ， 如 图 3-24 所 示 。 


a 击 “添加 文件 ”按钮 ， 如 图 3-23 所 示 。 添 加 需要 转换 视频 格式 的 文 
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尘 = 可 让 一 |@@ 单 击 

贡 站 加 中 二 六 
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图 3-21 选择 MP4 选 项 图 3-22 “视频 设置 ”对 话 框 

RE 

Bde i > 

Ea Ea rr 下 su 

四 单 击 
J BB srr SN SAR) EF 
Erom | 加 人 IF ro | 人 
图 3-23 单 击 “添加 文件 ”按钮 图 3-24 单 击 “确定 ”按钮 


9 STEP 03 @Q 返 回 “ 格 式 工厂 ” 主 界面 ， 人 @ 单 击 界面 底部 的 “点 击 开始 ”按钮 ， 如 图 3-25 所 示 。 开 始 转 
换 视频 格式 ， 转 换 完成 后 ， 合 在 列表 中 选择 需要 的 视频 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 人 @ 选 择 
“打开 输出 文件 夹 ”命令 ， 如 图 3-26 所 示 ， 即 可 打开 相应 的 文件 来， 查看 已 经 转换 视频 格式 的 文件 。 


Se ee 

-丽人 因 站 物 

ec le 

jt 

[em I J 

人 | 邦 昌 了 三 二 图 
| 图 3-25 单 击 “ 单 击 开 始 ”按钮 3-26 选择 “打开 输出 文件 夹 ”命令 


加 允 允 制作 与 录制 新 媒体 视频 


视频 相 较 于 文字 与 图 片 更 有 优势 ， 需 要 5 分 钟 读 完 的 图 文 ， 运 用 视频 可 能 1 分 钟 不 到 就 可 以 表达 出 
来 ， 所 以 用 户 可 以 多 多 尝试 运用 视频 来 表达 。 但 是 视频 也 有 一 个 缺陷 ， 就 是 耗 流量 ， 加 载 缓慢 ， 所 以 
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制作 的 视频 不 宜 过 长 。 


3.2.1 使 用 VUE 


VUE APP 是 由 北京 跃然 纸 上 科技 有 限 公司 开发 出 来 的 视频 软件 ， 主 打 朋 友 圈 小 视频 的 拍摄 。VUE 
en 提供 了 多 种 个 性 化 手机 视频 拍摄 ， 如 分 段 拍摄 ，VUE APP 一 共有 7 种 分 段 模式 供用 户 选择 ， 
分 别 是 1 段 、2 段 、3 段 、4 段 、5 段 、6 段 和 自由 。 用 户 可 以 根据 自己 的 喜好 采用 不 同 的 分 段 模式 拍摄 。 

二 先 择 视频 拍摄 时 间 的 长 短 ， 分 别 有 10 秒 、15 秒 、30 秒 、45 秒 、60 秒 、120 秒 以 及 
180 秒 。 用 户 可 以 根据 自己 的 习惯 或 拍摄 的 主题 来 确定 拍摄 时 长 。 对 于 镜头 速度 ，VUE APP 也 给 出 了 3 
种 模式 供用 户 选择 ， 分 别 是 正常 、 快 动作 、 慢 动作 。 

此 外 ，VUE APP 还 拥有 更 富有 冲击 力 的 竖 屏 画幅 、 全 屏 画 由 
幅 、 正 方形 画幅 等 多 种 画幅 可 供 拍 摄 者 选择 。 带 有 多 款 个 性 滤 镜 ， 能 让 拍摄 出 来 的 视频 画 玫 
的 艺术 感 。 还 有 美 颜 功能 ， 能 让 爱美的 人 展现 更 多 动态 的 美 。 

VUE APP 的 封面 及 进入 界面 如 图 3-27 所 示 。 


和 3-27 VUE APP 封 面 及 进入 界面 展示 


吾 ， 更 有 圆 形 画幅 、 宽 画幅 、 超 宽 画 
充满 电影 


视频 拍摄 完 后 ，VUE ape 如 多 镜头 剪辑 ， 动 画 贴纸 ， 调 节 视 频 
对 比 度 、 饱 和 度 、 暗 角 、 锐 度 ， 为 视频 添加 文字 等 ， 更 有 数码 变焦 以 及 分 镜 编辑 的 功能 ， 让 手机 视频 
更 有 趣味 性 。 下 面 介绍 运用 VUE APP 拍 摄 视频 的 方法 . 
9 STEP 01 打开 VUE APP， 进 入 拍摄 界面 ， 软 件 默 认 的 画幅 是 比较 小 的 ， 此 时 可 以 通过 设置 将 画幅 设置 
为 全 屏 ， 拍 摄 更 高 清 的 画面 ，@ 单 击 国 虹 议 钮 ， 如 图 3-28 所 示 ， 人 @ 弹 出 “视频 设置 ”对 话 框 ， 合 选 
择 横 画 幅 图 标 忆 ， 如 图 3-29 所 示 。 


大 片 这 么 折 ! 


1 
| 


“0 0 


HEF EE 


图 3-28 单 击 相应 按钮 
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9 STEP 02 单 击 红色 拍摄 按 馈 图 ， 即 可 进行 横 画 幅 手 机 视频 拍摄 ， 如 图 3-30 所 示 。 


单 击 红色 拍摄 按钮 


| 指 视频 画面 占据 了 整个 手机 屏幕 ， 不 留 一 点 空白 。 相 对 于 其 他 画幅 来 说 ， 全 屏 画 幅 ， 
， 更 具有 视觉 冲击 力 ， 尤 其 是 对 喜爱 大 屏幕 的 拍摄 者 或 观众 来 说 ， 全 屏 画幅 更 能 让 他 们 有 一 个 很 好 ， 


9 STEP 04 界面 底部 会 @ 弹 出 “画面 调节 ”对 话 框 ， 合 在 此 对 话 框 中 可 以 设置 亮度 、 对 比 度 、 饱 和 度 、 
色温 、 暗 角 、 锐 度 等 参数 ， 设 置 相 应 参数 后 ， 图 标 将 会 变 成 红色 ， 方 便 用 户 区 分 哪些 参数 调整 过 ， 设 
置 完 成 后 ， 可 以 全 单 击 “确定 ”按钮 ， 或 单 击 视频 画面 来 应 用 设置 ， 如 图 3-32 所 示 。 

9 STEP 05 单 击 界面 项 部 的 贺 按 钮 ， 界 面 底部 会 全 弹出 “分 镜 编 辑 ”对 话 框 ， 在 此 对 话 框 中 可 以 @ 设 置 
视频 静音 、 滤 镜 、 字 幕 、 变 焦 等 ， 合 单 击 视频 缩 览 图 中 间 的 小 白色 圆 点 ， 可 以 给 视频 添加 过 渡 效 果 ， 
如 果 预 览 后 觉得 拍摄 的 视频 不 好 ， 也 可 以 在 此 对 话 框 中 选择 删除 或 重 拍 ， 设 置 完成 后 ，@ 单 击 “ 确 
定 ” 按 钮 ， 如 图 3-33 所 示 。 


图 3-31 单 击 相应 按钮 图 3-32 “画面 调节 ”对 话 框 图 3-33 “分 镜 编辑 ”对 话 框 
9 STEP 06 单 击 界面 顶部 的 圆 按钮 ，@@ 界 面 底部 会 弹出 “添加 音乐 ”对 话 框 ， 在 此 对 话 框 中 可 以 设置 视 
频 音乐 ， 用 户 可 以 从 手机 中 选择 自己 已 有 的 音乐 ， 也 可 以 选择 VUE APP 提 供 的 配乐 ， 人 向 左 滑动 下 方 
的 按钮 ， 即 可 查看 更 多 的 配乐 ， 设 置 完 成 后 ， 合 单 击 “确定 ”按钮 ， 如 图 3-34 所 示 。 
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ry 拍摄 时 可 以 尝试 多 种 角度 ， 如 仰 拍 ， 和夫 加 可 而 的 肖 认 ,又 因 
hy 专家 指点 ) y . : 
| 一 全 二， 其 件 拍 和 角度 的 不 同 ， 可 以 出 现 不 同 的 拍摄 效果 。30 度 爷 拍 ， 倾 斜 角 小 、 通 视 效果 ， 
小 、 畸 变 小 。45 度 仰 拍 和 60 度 仰 拍 ， 会 使 视频 拍摄 主体 看 上 去 更 加 高 大 。 50 放 仰 折 属 于 与 拍摄 主 
， 体 旦 直角， 除非 是 特殊 镜头 的 需要 ， 一 般 的 视频 很 少 采 用 这 种 拍摄 方式 。 


9 STEP 07 单 击 界 面 项 部 的 圈 按 钮 ， 合 界面 底部 会 弹出 “添加 贴纸 "” 对 活 杠 ， 在 此 对 话 框 中 可 以 为 视频 
某 一 段 画面 。 和 @@ 单 击 添加 贴纸 或 动画 ， 也 可 以 添加 时 间 与 标题 等 文字 信息 ， 设 置 完 成 后 ，@@ 单 击 “ 确 
定 ”按钮 ， 如 图 3-35 所 示 。 

9 STEP 08 当 所 有 选项 设置 完成 后 ， 单 击 视频 预览 画面 中 的 图 图 标 ， 即 可 保存 视频 至 相册 ， 并 人 @ 进 入 
“分 享 ” 界面 ， 在 此 界面 中 可 以 直接 人 @ 单 击 相应 图 标 将 视频 分 享 至 各 大 新 媒体 平台 ， 也 可 以 全 单 击 底部 
的 “完成 ”按钮 ， 开 始 录制 新 的 视频 ， 或 者 @ 单 击 “ 再 次 编辑 ”按钮 ， 再 次 编辑 视频 ， 如 图 3-36 所 示 。 


CE 


图 3-34 “添加 音乐 ”对 话 框 图 3-36 单 击 相应 图 标 或 按钮 


3.2.2 ”使 用 美 拍 大 师 


美 拍 APP 是 一 款 由 厦门 美 图 网 科技 有 限 公 司 研制 发 布 的 一 款 集 直播 、 手 机 视频 拍摄 和 手机 视频 后 
期 于 一 身 的 视频 软件 。 美 拍 APP 刚 一 面世 ， 就 赢得 了 众人 的 狂热 参与 ， 可 谓 是 掀起 了 一 场 全 民 直 播 的 
热潮 。 它 主打 直播 和 短视 频 拍摄 ， 以 20 多 种 不 同类 型 的 频道 吸引 了 众多 粉丝 的 加 盟 与 关注 。 如 图 3-37 
所 示 为 美 拍 APP 封 面 及 进入 界面 展示 。 


图 3-35 


姜 提 


图 3-37 美 拍 APP 封 面 及 进入 界面 展示 


美 拍 APP 除 了 直播 功能 强大 之 外 ， 它 的 手机 视频 拍摄 功能 也 不 可 小 舰 。 它 除了 可 以 拍摄 10 秒 的 短视 
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频 以 外 ， 还 为 用 户 提供 了 15 秒 和 5 分 钟 的 视频 时 长 选择 ， 为 用 户 的 短视 频 拍摄 时 长 提供 了 多 种 选择 。 

想 要 通过 美 拍 APP 对 拍摄 视频 调 出 画面 质感 ， 有 两 种 视频 类 型 需要 向 大 家 详细 讲解 。 一 种 是 直接 
对 由 美 拍 APP 拍 摄 的 视频 进行 调整 ， 另 一 种 是 美 拍 以 外 的 软件 拍摄 的 视频 再 由 美 拍 APP 做 后 期 调整 
下 面 一 一 为 大 家 详细 讲解 其 步骤 。 

(1) 直接 由 美 拍 APP 拍 摄 的 视频 ， 再 由 美 拍 APP 来 进行 后 期 调整 的 步骤 如 下 

eSTEP 01 打开 美 拍 APP，@@ 单 击 思 按钮 ， 如 图 3-38 所 示 。 进 入 视频 拍摄 界面 ， 用 户 可 以 自行 选择 视频 时 
长 ， 软 件 默认 时 长 为 15 秒 ， 和 @@ 单 击 画面 即 可 自动 对 焦 ， 和 @ 单 击 圈 按 钮 开始 拍摄 视频 ， 如 图 3-39 所 示 。 

9 STEP 02 在 视频 拍摄 期 间 ， 用 户 不 一 定 非 要 拍摄 完 所 选 时 长 ， 如 选择 的 是 15 秒 时 长 ， 但 拍摄 到 12 秒 
就 不 想 再 继续 拍摄 了 ， 可 以 @ 单 击 右 下 方 的 中 按钮 ， 如 图 3-40 所 示 。 结 束 视频 拍摄 ，@ 进 入 “编辑 视 
频 ” 界 面 ， 在 此 界面 中 ， 用 户 可 以 根据 需要 自选 择 合适 的 滤 镜 ， 如 图 3-41 所 示 。 


Qa 


大 片 这 么 六 


站 
手机 摄影 


图 3-38 单 击 相应 按钮 图 3-39 单 击 相 应 按钮 图 3-40 单 击 相应 按钮 
9 STEP 03 编辑 完成 后 ，@ 单 击 右 上 方 的 “下 一 步 ” 按 钮 ， 软 件 将 自动 保存 设置 并 生成 新 视频 ， 妇 
图 3-42 所 示 。 公 进入 “分 享 ”界面 ， 用 户 可 以 将 视频 分 享 至 各 个 新 媒体 平台 ， 合 点 亮相 应 图 标 ，@ 再 
单 击 “ 分 享 ”按钮 即 可 ， 如 图 3-43 所 示 。 


天 片 这 


高 手 新 玩法 


EY 更 有 魔法 自拍 功能 


可 


美 拍 APP 具 有 强大 的 滤 筑 功 能 能 ， 
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款 浅 镜 大 助 用 户 拍摄 出 


用户 和 由 节 好 的 自 。 


(2) 有 


些 视频 并 不 是 开始 就 是 
软件 拍摄 的 ， 这 一 类 视频 在 美 拍 APP 中 站 


9 STEP 01 打开 美 拍 APP, @ 
向， 全 选择 相应 视频 ，@ 单 


6 界 


el 


中 | 
日 


图 3-44 单 击 “ 


9 STEP 02 @@ 进 入 “剪辑 ”界面 ， 外 拖 动 视频 缩 览 
频 ，@ 单 击 右 上 方 的 “下 一 步 ”按钮 ， 如 图 3-46 所 示 ， 全 进入 “编辑 视频 ”界面 


的 滤 镜 特效 ， 如 图 3-47 所 示 。 


此 外 ， 在 本 身 没有 下 载 镜 


面 顶部 的 “ 


美 拍 APP 拍 摄 的 ， 而 是 用 手机 自 带 ;的 录像 
的 后 期 调整 方式 又 有 所 不 
好 入 ”按钮 ， 如 


一 步 ”按钮 ， 如 图 3-45 所 示 。 


导入 ” 


一 步 ”按钮 


之 前 ， 


用 户 还 需要 先行 单 击 下 载 该 镜 之 后 ， 才 能 在 视频 当 


按钮 


图 至 


图 3-45 单 击 “ 下 一 步 ”按钮 


合适 位 置 ，@@ 单 击 “ 分 割 ” 


多 种 风格 的 视频 ， 


功能 能 ， 或 者 其 他 视频 


同 。 有 具体 操作 步骤 如 下 。 
图 3-44 所 示 。 全 进入 “全 部 视频 ” 界 


按钮 ， 即 可 剪辑 视 


。。 美 拍 APP 中 的 渡 镜 众多 ， 受 篇 幅 所 限 ， 笔 者 不 能 一 一 为 大 家 
人 体验 不 同 的 深重 


给 视频 带 来 的 


，@ 为 视频 选择 合适 


展示 注 镜 效果 。 希 | 
不 同 风格 。 | 
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© STEP 03 人 @ 单 击 


“编辑 ”按钮 ， 


切换 至 编辑 
“剪辑 * 


面板 ， 在 其 中 


户 可 以 为 视频 @ 设 置 字幕 、 特 效 、 加 速 等 ， 


JE 


按钮 ， 再 次 剪辑 视频 ， 设 置 完成 


如 果 之 前 未 能 裁剪 得 当 ， 也 可 以 单 击 


钮 ， 如 图 3-48 所 示 。 佑 进入 “分 享 ” 界 
频 分 享 至 各 大 新 媒体 了 


图 3-48 


回 


单 击 “ 下 一 : 


四 进入 


单 


按钮 图 3-49 “分 享 ”按钮 


后 ， 合 单 击 “ 
， 用 户 可 以 为 视频 合 添 加 描述 的 文字 ， 并 通过 @ 点 亮 图 标 将 视 
EF 台 ， 设 置 完成 后 ，@ 单 击 “ 分 享 ”按钮 ， 即 可 完成 分 享 ， 如 图 3-49 所 示 。 


下 


J 


美 拍 APP 中 有 多 种 不 同 的 画幅 可 供用 户 选 择 。 用 户 在 拍摄 视频 时 ， 可 以 尝试 使 


用 不 同 的 画幅 。 
例如 正方 形 画幅 。 


它 是 一 种 比较 基础 、 不 挑 人 、 不 挑 技术 的 视频 拍摄 画幅 ， 尤 其 是 对 于 手机 ， 


， 视频 拍摄 新 手 来 说 ， 更 是 能 够 信 手 拓 来 ， 无 须 考虑 太 多 视频 拍摄 的 构图 技巧 ， 打 开 手 机 就 能 拍摄 ， 
| 出 效果 良好 的 视频 。 
| 还 有 图 形 画 幅 。 国 形 画 幅 拍 摄 视频 是 一 种 相对 来 说 更 具有 艺术 感 的 视频 拍摄 手法 ， 在 人 们 以 
” 宽 银 若 为 主流 的 时 候 ， 圆 形 画幅 更 像 是 一 种 格格 不 入 的 异类 占据 在 视频 摄影 中 ， 将 画面 浓缩 在 屏 
” 若 中 那 小 小 的 图形 之 中 ， 除 了 十 分 高 深 的 “上 善 若水 任 方 图 ”之 外 ,更 有 一 种 将 天 地 万 物 纳入 到 
i 一 点 之 中 的 人 生 哲 理 。 


3.2.3 ”使 用 快手 


快手 APP 是 一 款 摄像 软件 ， 最 初 是 用 来 制作 、 分 享 GIF 图 片 的 手机 应 
用 于 用 户 记录 和 分 享 生活 
且 快 手 启动 迅速 ， 


具 应 用 转型 为 短视 频 社 
的 动态 


内 就 制作 出 自己 


图 


左右 即 可 进入 软件 


区 ,成 为 


片 。 而 


的 主 界 


在 快手 上 ， 


播 与 粉丝 实时 互动 
这 里 ， 人 们 能 找到 
也 可 以 让 世界 发 现 真实 有 


世界 ， 


目 户 可 忆 


面 。 如 


3-50 所 示 为 快手 APP 封 面 。 
用 照片 和 短视 频 记 录 自 己 的 生活 点 滴 ， 也 可 以 通过 直 
。 人 快手 的 内 容 覆 盖 生 活 


用 


的 平台 。 


它 的 使 用 方法 很 简 


软件 。 后 来 快手 从 纯粹 的 工 


单 ， 可 以 在 几 秒 钟 


内 


为 它 没有 设置 欢迎 画面 ， 因 此 


日 户 遍 布 全 国 


的 方方面面 ， 各 地 。 在 


自己 喜欢 的 


运 


小 20 倍 ， 甚 至 小 过 高 清晰 度 的 静态 


快手 拍摄 的 每 张 动态 


容 ， 找 到 自己 感 兴趣 的 人 ， 看 到 更 真实 有 趣 的 
的 自己 。 


还 
9 片 


都 是 超 / 


E 缩 的 ， 比 微 博 上 同等 清晰 度 的 图 片 


图 


片 。 并 且 所 有 人 的 图 片 有 着 同样 概率 的 


曝 ”图 3-50 


户 仅 需要 等 待 1 秒 


党 


快手 APP 封 面 
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光 机 会 。 热 门 图 片 按 “喜欢 ”用 户 的 数量 来 排序 ; 动态 图 片 喜欢 的 人 越 多 ， 被 推荐 的 概率 也 就 越 大 。 
下 面 为 大 家 介绍 如 何 使 用 快手 APP 拍 摄 并 处 理 视频 。 
@ STEP 01 打开 快手 APP， 什 单 击 右上 方 的 避 按 钮 ， 如 图 3-51 所 示 。 进 入 到 视频 拍摄 界面 ，@ 单 击 鳞 按 
钮 ， 如 图 3-52 所 示 。 
9 STEP 02 即 可 开始 拍摄 视频 ， 拍 摄 时 如 果 画 面 不 清晰 ， 可 以 单 击 画面 中 的 某 处 重新 对 焦 ， 录 制 完成 
后 ，@@ 再 次 单 击 和 按钮 ， 如 图 3-53 所 示 ， 即 可 停止 拍摄 ，@@ 单 击 : 按钮 ， 如 图 3-54 所 示 。 


图 3-51 单 击 相 应 按钮 图 3-52 单 击 相应 按钮 图 3-53 单 击 相 应 按钮 
9 STEP 03 @ 进 入 “编辑 ”界面 ， 估 用 户 可 以 根据 需要 选择 合适 的 滤 镜 效果 来 美化 视频 ， 让 视频 更 出 
彩 ， 选 择 好 滤 镜 后 ， 合 单 击 “特效 ”按钮 ， 如 图 3-55 所 示 。 即 可 切换 相应 的 对 话 框 ， 人 用 户 可 以 根据 
需要 选择 多 种 画面 特效 ， 但 切记 要 与 视频 主题 相 契 合 ，@@ 单 击 “ 配 乐 ”按钮 ， 如 图 3-56 所 示 。 
EEE 


a 


1 


移动 UI 设计 移动 UI 设计 


图 3-54 单 击 相应 按钮 图 3-55 单 击 “ 和 特效” 按钮 图 3-56 单 击 “配乐 ”按钮 


一 一 TAN 单 击 “ 时 间 特 效 ”按钮 ， 可 以 切换 至 “时 间 特 效 ”选项 区 ， 其 中 包 合 了 3 种 时 
| 家 指点 ) 风笛 效 ， 各 选项 全 义 如 下 。 | 
”> “ 慢 动 作 ”: 可 以 使 画面 产生 慢 动作 的 效果 。 
”> “反复 ”: 拖 动 视频 缩 览 图 至 相应 位 置 后 ， 可 以 以 该 位 置 至 视频 结束 位 置 为 片段 ， 反 复 播放 


画面 。 


“如 转 时 光 ”: 可 以 从 视频 结尾 处 开始 播放 至 视频 开关 位置。 
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9 STEP 04 即 可 切换 相应 的 对 话 框 ， 全 用 户 可 以 调整 视频 原 有 声音 的 大 小 ， 也 可 以 重新 为 视频 配乐 ， 
人 @ 单 击 “ 封 面 ” 按 钮 ， 如 图 3-57 所 示 。 切 换 至 相应 对 话 框 ， 用 户 可 以 全 选择 其 中 一 张 图 片 作为 封面 ， 
并 添加 相应 的 主题 字 ， 若 是 主题 字 的 模板 中 没有 合适 的 ， 可 以 @ 单 击 “ 高 级 ”按钮 ， 如 图 3-58 所 示 。 


图 3-57 单 击 “ 封 面 ” 按 钮 图 3-58 单 击 “ 高 级 ”按钮 

9 STEP 05 @Q 进 入 “高 级 ”界面 ， 在 此 界面 中 ， 傅 用户 可 以 更 细致 地 编辑 封面 图 ， 不 仅 可 以 添加 主题 

字 ， 还 可 以 添加 贴纸 ， 并 对 视频 进行 剪辑 ， 设 置 完 成 后 ， 合 单 击 按钮 ， 如 图 3-59 所 示 。 返 回 “ 编 

辑 ” 界 面 ， 并 单 击 右上 角 的 “下 一 步 ”按钮 ， 信 进入 到 “分 享 ” 界 面 ， 用 户 可 以 为 视频 全 添加 描述 的 

文字 ， 并 通过 @ 点 亮相 应 的 图 标 将 视频 分 享 至 各 大 新 媒体 平台 ， 设 置 完 成 后 ，@ 单 击 “ 发 布 ” 按 钮 ， 
即 可 完成 分 享 ， 如 图 3-60 所 示 。 


[6h 


WH 


图 3-59 单 击 相应 按钮 图 3-60 单 击 “ 发 布 ” 按 钮 


3.2.4 使 用 Camtasia Studio 


Camtasia Studio 是 最 专业 的 屏幕 录像 和 编辑 的 软件 套装 。 软 件 提供 了 强大 的 屏幕 录像 (Camtasia 
Recorder) 、 视 频 的 前 辑 和 编辑 (Camtasia Studio) 、 视 频 菜 单 制 作 (Camtasia MenuMaker) 、 视 频 剧 
场 (Camtasia Theater) 和 视频 播放 功能 (Camtasia Player) 等 。 使 用 Camtasia Studio 软 件 ， 用 户 可 以 轻 
松 地 录制 自己 的 视频 ， 并 进行 相应 的 剪辑 和 过 场 动画 ， 还 可 以 为 视频 添加 字幕 和 水 印 ， 并 转 码 成 多 种 
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格式 的 视频 。 
下 面 为 大 家 介绍 如 何 使 用 Camtasia Studio 录 制 视频 。 
9 STEP 01 打开 Camtasia Studio 软 件 ， 弹 出 相应 的 对 话 框 ， 信用 户 可 以 在 “选择 区 域 ” 中 设置 录制 视频 
的 区 域 大 小 ，@ 并 在 “设置 ”选项 区 中 调整 麦克 风 的 声音 ， 设 置 完 成 后 ， 合 单 击 国 按 钮 ， 开 始 录 制 视 
频 ， 如 图 3-61 所 示 。 
9 STEP 02 弹出 录制 倒计时 ， 如 图 3-62 所 示 ， 当 数字 消失 时 ， 即 可 开始 录制 视频 。 


图 3-61 单 击 相应 按钮 图 3-62 ”弹出 录制 倒计时 
9 STEP 03 录制 视频 时 ，@ 选 定 区 域 的 四 个 角 会 出 现 闪烁 的 绿色 边 角 ， 用 于 提示 用 户 录 制 的 范围 ，@ 并 
且 对 话 框 中 的 按钮 会 有 所 改变 ， 单 击 “ 重 新 启动 ”按钮 ， 可 以 删除 正在 录制 的 视频 ， 返 回 到 选 定 区 域 
对 话 框 ，“ 继 续 ” 按 钮 则 是 用 户 录制 时 暂停 录制 和 再 次 启动 录制 时 使 用 ; “停止 ”按钮 则 是 在 用 户 录 
制 完 视频 后 ， 停 止 录制 并 进入 预览 使 用 ， 如 图 3-63 所 示 。 


OH 现 


图 3-63 ”视频 录制 界面 


“音频 ”|“ 鼠 标 单 击 声音 ”命令 ， 录 制 鼠 标 单 击 的 声音 。 


l 击 “停止 ”按钮 ， 即 可 停止 录制 视频 ，@ 弹 出 “预览 ”对 话 框 ， 在 其 中 
户 可 以 预览 录制 的 视频 ， 确 认 无 误 后 ， 外 单 击 “保存 ”按钮 ， 如 图 3-64 所 示 。 即 可 弹出 相应 的 对 话 
框 ， 设置 存储 位 置 后 ， 单 击 “ 保 存 ” 按 钮 ， 合 即 可 弹出 相应 的 对 话 框 ， 提 示 用 户 视频 保存 成 功 ， 


如 图 3-65 所 示 。 
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图 3-64 单 击 “保存 ”按钮 图 3-65 ”弹出 相应 对 话 框 


.5 使 用 Snag 


SnagIt 是 Windows 一 个 非常 著名 的 优秀 屏幕 、 文 本 和 视频 捕获 、 编 辑 与 转换 的 软件 ， 它 可 以 捕 
捉 、 编 辑 、 共 享 您 计算 机 屏幕 上 的 一 切 对 象 。 但 是 使 用 SnagIt 软 件 捕获 的 视频 只 能 保存 为 AVI 格 式 ， 若 
想 要 转 成 其 他 格式 还 需要 另外 的 软件 。 其 界面 如 图 3-66 所 示 。 


» 


图 3-66 。 ”SnagIt 界面 
F 面 为 大 家 介绍 如 何 使 用 SnagIt 录 制 视频 。 
© STEP 01 打开 SnagIt 软 件 ，@ 选 择 “ 录 制 一 个 屏幕 视频 ”选项 ，@ 单 击 右 侧 选 项 区 中 “区 域 ” 右 侧 的 
国 按钮 ， 如 图 3-67 所 示 ， 和 名 弹出 “输入 属性 ”对 话 框 ， 人 四 在 “矩形 大 小 ”选项 区 中 设置 录制 的 大 小 ， 
回 单 击 “确定 ”按钮 ， 如 图 3-68 所 示 。 


葵 和 属性 二 因 弹 出 | 
国定 & 域 | 视 

矩形 大 小 用 像素 ) 

宽度 和) 960 高度 00: 640 | 四 设置 


使 用 固定 开始 点 0 
起 始 x 二 T 
回 羊 击 E35 


妨 定 取消 应 用 WW) |][ 寺 助 
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件 ”按钮 ，@ 弹 出 “保存 配置 


© STEP 02 返回 SnagIt 软 件 界面 ， 


击 右 侧 选项 


文件 ”对 话 框 ，@ 单 击 “ 存 为 新 文件 ”按钮 ， 如 


中 的 “捕获 ” 按钮， 弹出 白色 方 框 ， 在 需要 录制 的 


板 ， 人 @ 单 击 “开始 ”按钮 ， 如 图 3-70 所 示 。 


可 有 本 村 文件 << | @@ 弹 出 


加 屏幕 中 的 x 得 
当前 已 选 定 。 


信和 文 件 还 是 保 丰 这些 设 各 为 一 个 新 配置 


十 中 | [EREEESLDHE| 人 O 羊 击 


图 3-69 单 击 “ 存 为 新 文件 ”按钮 


9 STEP 03 即 可 开始 录制 视频 ， 录制 


完成 后 ，@ 


区 吕 


hh 下方 的 “保存 配置 文 


图 3-70 单 击 “ 开 始 " 


击 “ 人 停止” 按钮 ， 如 图 3-71 所 示 ， 结 束 录制 。@ 弹 出 


“SnagIt 捕 获 预 览 ” 对 话 框 ，@@ 章 


FU 


Eee- 一 | 个 洋 出 


一 品 互 可 复 


3-69 所 示 。 返 回 SnagIt 软 件 界 


区 域 单 击 ， 即 可 确定 录制 的 范 


， 单 击 右 侧 选项 区 
， 因 并 弹出 相应 再 


回 


加 | 


“保存 ”按钮 ， 如 图 3-72 所 示 ， 按 提示 保存 视频 即 可 完成 录制 。 


rr 


声音 对 广告 传播 来 说 很 重要 。 上 声音 通过 调动 人 的 听觉 器 官 ， 达 到 使 观众 
更 好 地 理解 视频 画面 的 效果 。 而 且 ， 上 声音 还 有 一 个 视频 无 法 比拟 的 优势 是 ， 
它 不 需要 画面 的 展示 ， 可 以 口 口 相传 ， 达 到 很 好 的 传播 效果 


搜索 音频 并 进行 下 载 
过 APP 录 制 语音 旁白 
转换 音频 文件 的 格式 
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区 下 下 载 与 转换 音频 


在 视频 拍摄 录制 时 ， 可 以 为 视频 添加 合适 的 音乐 ， 目 的 是 让 观众 更 加 容易 理解 拍摄 者 想 要 表达 的 
内 容 ， 同 时 也 让 视频 画面 更 具 感染 力 ， 所 以 好 的 音乐 很 重要 。 本 节 主 要 介绍 下 载 与 转换 音频 的 方法 。 


4.1.1 搜索 音频 并 进行 下 载 


音乐 被 称 为 是 人 们 真实 情感 抒发 的 一 种 艺术 ， 具 有 节奏 感 和 旋律 感 。 在 很 大 程度 上 ， 音 乐 是 人 内 
心 真实 情感 的 表达 ， 很 容易 引发 人 们 的 共鸣 。 音 乐 对 于 人 来 说 ， 往 往 又 有 很 强大 的 情感 牵引 力 。 
为 此 ， 可 以 试 着 在 多 种 场合 添加 合适 的 音乐 ， 如 自己 录制 的 视频 中 、 微 店 商铺 中 等 。 但 是 ， 音 乐 
却 不 是 随便 添加 的 ， 要 根据 视频 或 者 店铺 的 主题 与 拍摄 者 想 要 表达 的 思想 感情 ， 来 恰当 地 选择 添加 什 
么 样 的 音乐 。 

音乐 按照 不 同 的 分 类 方法 ， 可 以 分 为 众多 类 型 ， 比 如 流行 音乐 、 古 典 音乐 、 尔 士 乐 、 反 情 音乐 、 
伤感 音乐 、 古 风 音乐 、 现 代 音乐 等 。 众 多 的 音乐 种 类 ， 也 就 要 求 我 们 在 进行 视频 音乐 添加 时 ， 要 根据 
其 主题 来 选择 添加 的 音乐 。 

手机 视频 音乐 的 添加 ， 可 以 通过 众多 手机 视频 后 期 处 理 软 件 进 行 添加 ， 简 单 的 操作 就 能 实现 手机 
视频 的 音乐 添加 。 本 节 就 以 火山 小 视频 APP 为 例 ， 来 为 大 家 详细 讲解 如 何 搜 索 音乐 并 下 载 ， 然 后 插入 
到 视频 中 。 

火山 小 视频 APP 是 由 北京 微 播 视界 科技 有 限 公司 研制 发 布 的 一 款 主打 15 秒 短视 频 拍摄 的 手机 视频 
软件 ， 号 称 是 最 火爆 的 短视 频 社交 平台 ， 以 视频 拍摄 和 视频 分 享 为 主 。 如 图 4-1 所 示 为 火山 小 视频 封面 
及 进入 界面 。 


(火山 小 视频 


图 4-1 火山 小 视频 封面 及 进入 界面 

火山 小 视频 APP 除 了 拍摄 视频 和 视频 分 享 之 外 ， 还 有 粉丝 互动 功能 ， 粉 丝 可 以 为 自己 喜欢 的 主播 
送礼 物 进行 打 赏 等 。 此 外 ， 其 手机 视频 后 期 编辑 功能 也 相当 强大 。 它 可 以 为 视频 信 手 涂鸦 ， 具 有 多 款 
滤 镜 ， 帮 助 用 户 更 好 地 拍摄 视频 。 尤 其 是 其 视频 后 期 音乐 编辑 功能 ， 更 是 十 分 出 彩 ， 拥 有 多 种 风格 背 
景 音乐 ， 使 用 户 可 以 根据 自身 的 喜好 来 对 视频 的 背景 音乐 进行 添加 


| 册 | | 
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下 面 以 火山 小 视频 APP 为 例 ， 介 绍 搜索 并 下 载 音频 的 方式 。 


@ STEP 01 打开 火山 小 视频 APP， 选 择 相应 视频 ，@ 进 入 “在 线 音 乐 ”界面 ，@ 单 击 “ 歌 曲 搜索 ”按钮 ， 
如 图 4-2 所 示 。 四 弹出 输入 文本 框 ，@@ 输 入 想 要 插入 的 歌曲 名 称 ， 回 单 击 “ 搜 索 ” 按 钮 ， 如 图 4-3 所 示 。 
9 STEP 02 即 可 显示 多 种 版 本 的 歌曲 ，@ 单 击 其 中 一 个 版 本 ， 可 以 试听 歌曲 ， 确 认 需 要 的 歌曲 后 ，@ 单 
击 “ 确 定 ”按钮 ， 如 图 4-4 所 示 。 系 统 会 全 弹出 加 载 提示 框 ， 此 时 系统 正在 缓存 歌曲 ， 如 图 4-5 所 示 。 

讲 在 线 音 乐 < 在 线 音乐 < 在 线 音乐 
Ee 人 @ 平 去 
小 情歌 入 
热门 
i 
加 - I 
上 呈 @ 田 - 
加 四 GHI JKL MNO 
PQRS | TUV | wxYz 
ro 回 单 击 
歌曲 搜索 ” 按 锂 图 4-3 单 击 “ 搜 索 ” 按 钮 图 4-4 单 击 “ 确 定 ”按钮 


在 添加 音乐 时 ， 可 以 适当 考虑 流行 音乐 ， 流 行 音乐 因 其 流行 之 快 、 受 众 面 广 ， 
所 隐 尖 罗 了 了 流行 音乐 的 手机 视频 ， 也 会 在 很 大 程度 上 吸引 人 们 的 注意 。 
eSTEP 03 加 载 完成 后 ， 即 可 @ 进 入 “音乐 裁剪 ”界面 ， 人 @ 滑 动 选择 音乐 起 点 来 选 定 歌 的 片段 ， @ 单 
击 “ 确 认 ” 按 钮 ， 如 图 4-6 所 示 。 即 可 返回 视频 编辑 界面 ，@ 当 “音乐 ”选项 右 下 角 出 现 区 符号 ， 则 说 
明 音 乐 添加 成 功 ， 如 图 4-7 所 示 。 


图 4-5 ”弹出 加 载 提 示 框 图 4-6 单 击 “ 确 认 ” 按 钮 图 4-7 出现 相 应 符号 
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4.1.2 通过 APP 录 制 语音 旁白 


旁白 ， 是 指 影视 剧 中 ， 剧 中 角色 或 者 非 剧 中 角色 对 观众 说 的 解说 词 ， 是 属于 影视 剧 和 戏剧 的 专 有 
名 词 ， 目 的 在 于 用 声音 的 形式 介绍 剧情 走向 、 剧 情 内 容 甚 至 是 角色 的 内 心 独白 等 。 旁 白 ， 能 够 弥补 影 
视 剧 中 光 靠 画面 和 角色 的 对 话 展现 不 出 来 的 内 容 ， 或 者 观众 看 不 懂 、 不 清楚 的 情节 交代 。 

在 手机 视频 拍摄 中 的 旁白 录制 ， 一 方面 的 目的 在 于 让 观众 在 观看 视频 的 同时 ， 容 易 理 解 拍摄 者 想 
要 表达 的 深层 意思 ， 或 者 让 观众 更 简单 清楚 地 观看 视频 内 容 ， 另 一 方面 ， 主 要 是 为 了 将 视频 中 不 容易 
展现 出 来 ， 但 又 确实 存在 的 内 容 表 达 出 来 ， 使 视频 内 容 更 加 完整 。 

在 后 期 为 视频 录制 声音 和 旁白 ， 可 以 弥补 边 拍摄 边 录制 声音 时 容易 出 错 的 情况 ， 而 且 在 后 期 录 


制 声音 ， 可 以 极 大 地 增强 声 
起 。 本 节 就 以 巧 影 APP 为 例 
巧 影 APP 是 由 北京 奈 其 


除 此 之 外 ， 巧 影 APP 还 

在 视频 声音 处 理 方面 巧 影 AP 
除了 以 上 对 手机 视频 前 

过 渡 效 果 等 ， 
运用 巧 影 APP 录 制 声音 
间 长 度 超过 了 视频 的 播放 时 + 
笔者 这 里 是 以 声音 录制 

e@ STEP 01 打开 巧 影 APP， 选 
音 录 制 界面 ， 外 将 视频 时 间 


i 瑞明 科技 有 限 公司 研制 发 布 的 
有 视频 剪辑 、 视 频 图 像 处 理 、 


音 录制 的 灵活 性 ， 能 够 在 后 期 慢 慢 来 调节 ， 使 声音 与 画面 更 好 地 结合 在 一 
来 为 大 家 详细 讲解 如 何 录 制 语音 旁白 ， 并 试听 检查 错误 。 


- 款 手机 视频 后 期 处 理 软件 ， 它 的 主要 功能 


视频 文本 处 理 等 。 如 图 4-8 所 示 为 巧 影 APP 的 封面 及 进入 界面 展示 。 


图 4-8 ”了 巧 影 APP 封 面 及 进入 界面 
可 以 调整 视频 画面 的 各 项 参数 ， 如 饱和 度 、 对 比 度 、 亮 度 、 锐 度 等 功能 。 


P 也 有 良好 的 效果 。 
常规 编辑 之 外 ， 巧 影 APP 还 有 视频 动画 贴纸 、 各 色 视 频 主 题 ， 以 及 多 样 的 


能 帮助 手机 视频 的 后 期 处 理 更 上 一 层 楼 。 


要 注意 ， 声 音 录制 时 长 要 少 于 或 等 于 视频 播放 时 长 ， 一 旦 声音 录制 的 时 


发， 软件 就 会 自动 停止 录音 。 所 以 在 录制 声音 的 时 候 ， 要 把 握 好 时 间 。 
二 长 小 于 视频 播放 时 长 为 例 的， 具体 操作 步骤 如 下 。 
择 待 录 音 的 手机 视频 ， 进 入 视频 编辑 界面 。 人 @ 单 1 


轴 调 整 到 声音 开始 的 帧 数 ， 如 图 4-9 所 示 。 此 时 


可 


声音 ”按钮 ， 进 入 声 
以 先 测试 麦克 风 是 否 正 


常 ， 如 果 开 
音 的 录制 ， 如 图 4-10 所 示 。 


单 


图 4-9 


E 常 ， 当 声音 响起 时 


， 音 量 条 会 有 颜色 显示 ， 确 认 无 误 之 后 ， 合 单 击 “ 开 始 ”按钮 ， 开 始 声 
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©® 


击 “ 声 音 ” 按 钮 图 4-10 单 击 “ 开 始 ” 
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9 STEP 02 录制 完成 后 ， 人 @ 单 击 “ 停 止 ” 按 钮 ， 即 完成 声音 录制 ， 如 图 4-11 所 示 。 录 制 成 功 的 音频 ， 


人 @ 会 显示 在 视频 轨道 下 方 ， 呈 紫色 ， 如 图 4-12 所 示 。 


按钮 

用 巧 影 APP 录 制 完 声音 ， 可 以 对 录制 的 声音 旁 本 加 
白 进 行 试听 ， 检 查 其 中 是 人 字 不 清 的 情 
况 ， 以 便 修改 。 


打开 巧 影 APP， 完 成 录音 后 进入 录音 编辑 界面 ， 单 
击 “ 预 听 ” 按 钮 ， 即 可 进入 录音 预 听 界面 ， 软 件 自动 播 
- SR [RR 二 Bp 


放 视 频 录 音 ， 如 图 4-13 所 示 。 
如 果 在 声音 旁白 录制 之 后 ， 发 现 录 音 有 误 或 者 不 符 
合 要 求 ， 还 可 以 利用 巧 影 APP 重 新 进行 录制 ， 具 体操 作 步 又 如 下 。 
9 STEP 01 打开 巧 影 APP， 选 择 待 录 音 视频 进入 视频 编辑 界面 ， 完 成 录音 后 进入 录音 编辑 界面 ，@ 选 中 


音频 后 ， 人 @ 选 择 “ 重 录 ” 选 项 ， 如 图 4-14 所 示 。 进 入 声音 重 录 界 面 ， 合 单 击 “ 开 始 ”按钮 ， 如 图 4-15 


图 4-13 ” 预 听 录制 的 语音 旁白 


RR RR 


图 4-14 选择 “ 重 录 ”选项 图 4-15 单 击 “ 开 始 ” 按 钮 


9 STEP 02 录制 完毕 后 ，@ 单 击 “ 停 止 ” 按 钮 ， 或 等 录音 自动 结束 ， 如 图 4-16 所 示 。 界 面 自动 跳 回 录音 
编辑 界面 ，@ 即 为 完成 声音 的 重新 录制 ， 如 图 4-17 所 示 。 


图 4-16 单 击 


4.1.3 ”转换 音频 文件 的 格式 


当 


式 。 格 式 了 


9 STEP 01 @@ 打 开 格式 工厂 ， 在 左 侧 选项 区 中 @@ 单 击 “音频 ”按钮 ， 弹 出 相应 的 “音频 ” 
MP3 选 项 ， 如 图 4-18 所 示 。 人 @ 


下 载 或 录制 完 音频 时 ， 


计量 i i 


二 四 名 式 I 厂 党国 
图 4-18 ”选择 MP3 选 项 


面 


[ 厂 的 音频 格式 有 很 多 种 ， 包 含 了 常用 的 音频 格式 。 下 面 详细 介绍 转换 音频 格式 


弹出 MP3 对 话 框 ，@@ 单 击 “ 添 加 文件 ”按钮 


Es 


引子 


ET 
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可 能 音频 的 格式 是 无 法 直接 使 用 的 ， 这 时 可 以 运用 格式 工厂 来 转换 音频 格 


的 操 人 
板 ， 


FE 步 又。 
全 选择 


H 


， 如 图 4-19 所 示 。 


Er 
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图 4-19 单 击 “ 添 加 文件 ”按钮 


9 STEP 02 按 提示 选择 人 @ 添 加 音频 后 ， 音 频 将 显示 在 对 话 框 中 ，@ 单 击 “ 确 定 ” 按 钮 ， 如 图 4-20 所 示 。 


全 返回 


9 STEP 03 音频 即 可 开始 转换 格式 ，@ 并 显示 进度 ， 如 图 4-22 所 示 。 当 音频 转换 完成 
单 击 鼠 标 右键 ，@@ 在 弹出 的 快捷 菜单 中 选择 “打开 输出 文件 夹 ”命令 ， 如 图 4-23 所 示 ， 即 可 打 


格式 工厂 主 界面 ，@ 单 击 底部 的 “点 击 开始 ”按钮 ， 如 图 4-21 所 示 。 


EE 


zl: jloe| 


EY 


To] 加 一 Sons 


tN ran 可 本 一 一直 


图 4-20 单 击 “确定 ”按钮 


音频 所 在 的 文件 夹 ， 取 用 音频 。 
一 = 二 加 = -一 he = 
加 | [OY 
le 
=====@e IF 司 转 
图 4-22 ”显示 进度 


or 一 
轩 作 台中 总 

yp |, (Ble 

寺 伟 入 二 
于 罗 

FE 本 下 击 开始 
时 ”图 4-21 单 击 “ 单 击 开始 ”按钮 


后 ， 可 以 在 音频 上 
开 输 出 


le 

Sy ny 

eu 

= - 二 一 

二 一 确 可 公式 工 F 汉 国 
图 4-23 ”选择 “打开 输出 文件 夹 ”命令 


Photoshop 
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处 理 音频 文件 


声音 录制 完 后 ， 可 能 还 无 法 达到 需要 的 水 准 。 因 为 录音 时 并 不 一 定 能 保证 绝对 不 出 差错 ， 所 以 ， 
音 需要 像 照 片 一 样 ， 做 一 下 后 期 处 理 ， 润 饰 细节 ， 修 复 瑕 症 ， 再 根据 需要 ， 适 当 添加 不 
同 的 音频 滤 镜 ， 处 理 完成 以 后 才能 成 为 一 段 出 色 的 音乐 文件 。 本 节 主 要 介绍 处 理 音频 文件 的 方法 。 


4.2.1 调整 声音 大 小 


在 给 视频 录制 声音 时 ， 要 将 录制 的 音频 音量 调整 到 合适 的 参数 。 如 果 录 制 声音 过 小 ， 可 能 观众 会 
听 不 清楚 ， 但 是 录制 的 音频 声音 过 大 ， 又 会 刺激 观众 的 耳 人 条， 造成 不 好 的 观 影 感受 ， 所 以 要 将 录制 的 
声音 大 小 控制 在 合理 的 范围 之 内 。 具 体操 作 步 又 如 下 。 

打开 巧 影 APP， 选 择 待 录 音 视频 进入 视频 编辑 界面 ， 完 成 录音 后 进入 录音 编辑 界面 ，@ 单 击 区 扩 
钮 ， 如 图 4-24 所 示 。 进 入 声音 调节 界面 ，@@ 单 击 音量 调节 按钮 回 ， 向 上 滑动 为 调 大 音量 ， 向 下 滑动 为 调 
小 音量 ， 调 整 到 合适 的 音量 后 ， 合 单 击 贺 按 钮 ， 即 可 完成 调节 录音 音量 的 大 小 的 操作 ， 如 图 4-25 所 示 。 


图 4-24 单 击 相应 按钮 图 4-25 单 击 相应 按钮 

录制 完 声 音 后 ， 还 可 以 适当 调节 左右 声 道 。 左 右 声 道 是 指 电子 设备 模拟 人 的 左右 耳 休 听觉 范围 
的 声音 输出 。 我 们 一 般 在 戴 耳 机 听 歌 时 ， 就 能 有 很 明显 的 听觉 感受 ， 一般 左 边 耳 条 听见 的 大 多 是 人 物 
原声 ， 也 就 是 左 声 道 ， 而 右边 耳 条 听见 的 大 都 是 配乐 ， 也 就 是 右 声 道 。 左 右 声 道 还 原 了 人 耳 的 听觉 习 
惯 ， 能 在 很 大 程度 上 提升 人 们 的 听觉 感受 。 
下 面 详细 介绍 调节 左右 声 道 的 操作 方法 。 
9 STEP 01 打开 巧 影 APP， 选 择 待 录 音 视频 进入 视频 编辑 界面 ， 完 成 录音 后 进入 录音 编辑 界面 ， 人 @ 选 中 

音频 ， 如 图 4-26 所 示 ， 弹 出 相应 的 选项 区 ，@@ 单 击 C 轴 按钮 ， 如 图 4-27 所 示 。 


到 音频 图 4-27 单 击 相 
9 STEP 02 进入 声音 调节 界面 ， 单 击 左右 声 道 轨道 上 的 滑动 按钮 回 ， 和 @ 向 左 滑动 为 增加 左 声 道 ， 如 
图 4-28 所 示 。 全 向 右 滑动 为 增加 右 声 道 ， 调 整 完毕 后 ， 合 单 击 图 按钮 ， 即 可 完成 录音 左右 声 道 的 调 


安 钮 


岗 


， 如 图 4-29 所 示 。 


在 录制 好 声音 之 后 ， 巧 影 APP 还 可 以 对 录制 的 声音 进行 裁剪 和 拆 分 ， 其 中 裁剪 分 成 两 种 情况 ， 一 是 
对 播放 指针 左 侧 的 音频 部 分 进行 裁剪 ;二 是 对 播放 指针 右 侧 的 音频 部 分 进行 裁剪。 而 拆 分 就 是 指 将 播放 
指针 左右 两 侧 的 音频 进行 分 割 ， 使 其 成 为 两 段 音 频 。 接 下 来 介绍 音频 裁剪 与 拆 分 的 操作 步骤 。 
打开 巧 影 APP， 选 择 待 录音 视频 进入 视频 编辑 界面 ， 完 成 录音 后 进入 录音 编辑 界面 ， 选 择 音频 ， 
下 拉 界 面 右上 方 的 菜单 ，@ 选 择 “ 剪 裁 / 拆 分 ”选项 ， 如 图 4-30 所 示 。@ 打 开 音 频 “ 剪 裁 与 拆 分 ”界面 ， 
将 视频 轨道 上 的 播放 指针 移动 到 需要 进行 剪裁 或 拆 分 的 位 置 ， 准 备 进行 剪裁 和 拆 分 ， 如 图 4-31 所 示 。 


选择 “剪裁 到 播放 指针 左 侧 ”选项 ，@@ 即 可 
对 播放 指针 左 侧 的 音频 进行 裁剪 ， 如 图 4-32 所 示 。 

选择 “剪裁 到 播放 指针 右 侧 ”选项 ，@@ 即 可 
对 播放 指针 右 侧 的 音频 进行 裁剪 ， 如 图 4-33 所 示 。 

选择 “从 播放 指针 拆 分 ”选项 ，@ 即 可 对 播放 
指针 两 侧 的 音频 进行 拆 分 ， 如 图 4-34 所 示 。 


mas OO 


Photoshop 


新 媒体 广告 设计 


当 声 音 录制 完成 后 ， 有 可 能 会 出 现 声 音 时 长 小 于 视频 播放 时 长 的 情况 ， 此 时 可 以 调整 音频 ， 将 声 
音 扩展 到 项 目 终点 ， 也 就 是 视频 的 结尾 处 ， 使 视频 结尾 也 能 有 录音 的 存在 。 具 体操 作 步 又 如 下 。 
© STEP 01 打开 巧 影 APP， 选 择 待 录 音 视 频 进 入 视频 编辑 界面 ， 完 成 录音 后 进入 录音 编辑 界面 ， 如 


图 4-35 所 示 。 禹 选择 音频 ，@@ 右 侧 弹 出 相应 的 菜单 ， 如 图 4-36 所 示 。 


图 4-35 录音 编辑 界面 图 4-36 ”弹出 相应 菜单 
9 STEP 02 下 拉 界 面 右 上 方 的 菜单 ，@ 开 启 “ 循 环 ” 选 项 右 侧 的 按钮 ， 如 图 4-37 所 示 。 由 于 录音 时 长 小 
于 视频 播放 时 长 ， 所 以 要 先 将 录音 进行 循环 设置 之 后 ， 才 能 将 其 扩展 到 视频 终点 。@ 开 启 “ 扩 展 到 项 
目 终点 ”选项 右 侧 的 按钮 ， 即 可 完成 将 声音 扩展 到 项 目 终点 的 设置 ， 如 图 4-38 所 示 。 


图 4-37 开启 “循环 ” 右 侧 按钮 图 4-38 开启 “扩展 到 项 目 终点 ” 右 侧 按钮 


4.2.3 ” 渡 镜 处 理 


巧 影 APP 中 的 滤波 器 可 以 将 录制 的 声音 变 成 滤波 器 中 相应 的 特效 声音 ， 使 录音 变 得 个 性 化 和 新 奇 
化 ， 也 能 让 录音 变 得 更 有 特点 、 更 有 趣味 性 。 具 体操 作 步 骤 如 下 。 

打开 巧 影 APP， 选 择 待 录 音 的 视频 进入 视频 编辑 界面 ， 完 成 录音 后 进入 录音 编辑 界面 ，@ 选 择 音频 ， 
@ 单 击 滤波 器 按钮 姻 图， 如 图 4-39 所 示 。 进 入 变声 器 选择 界面 ， 合 选择 想 要 应 用 的 变声 器 ， 这 里 选择 的 是 
“变声 器 〈 花 栗鼠 ) ”选项 ，@ 单 击 右 上 方 的 图 按钮 ， 即 可 完成 录制 音频 的 变声 处 理 ， 如 图 4-40 所 示 。 


图 4-39 单 击 江 按钮 图 4-40 单 击 相应 按钮 


3 巧 影 APP 湾 波 器 中 的 变声 器 除了 “ 花 票 思 ” 以 外 ， 还 有 “机 器 人 ” “低沉 " 和 
点 ，“ 变 调 ”。 这 几 款 变声 器 都 能 让 原本 录制 的 声音 发 生变 化 ， 旺 现 出 别具一格 的 声音 


人 章 前 知识 导读 
HS5 是 一 种 娱乐 化 社会 营销 新 模式 ， 它 的 制作 流程 非常 简单 快捷 ， 却 能 呈 
现 出 奢华 多 变 的 画面 形式 ， 而 且 还 可 以 精准 投放 保证 传播 效果 。 适 当地 设计 

一 些 H5 页 面 可 以 更 好 地 宣传 企业 ， 为 企业 带 来 更 多 粉丝 。 
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三 告 
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Pp 凡 科 互动 平台 > 交互 跳 转 页 面 设计 
bp 视界 互动 平台 * H5 互 动 游 戏 设计 
> 人 人 秀平 台 > H5 抽 奖 活动 设计 
p> 文本 与 动画 设计 * 投票 问卷 在 线 表 单 设计 
效果 图 片 欣 赏 
手机 根 影 构图 大 全 
既 松 拍 出 大 片 味 所 2 着 
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H5 的 制作 平台 


在 移动 互联 网 时 代 ，H5 已 经 越 来 越 被 有 眼光 的 人 看 重 。 与 此 同时 ， 各 种 H5 制 作 平台 也 横 空 出 
世 ， 为 新 来 的 新 媒体 美工 提供 了 大 量 创 作 工 具 。 对 新 媒体 美工 来 说 ， 需 要 了 解 这 些 平台 的 特征 ， 才 能 
在 设计 过 程 中 让 它们 为 己 所 用 ， 从 而 创作 出 更 多 优秀 的 H5 界 面 。 


5.1.1 凡 科 互动 平台 


凡 科 互动 是 一 个 专注 微 营 销 新 玩法 的 创新 型 企业 ， 为 商家 用 户 提供 多 元 、 高 效 、 易 用 的 互联 网 工 
有 具 ， 其 主页 如 图 5-1 所 示 。 


图 5-1 凡 科 互动 主页 


凡 科 互动 平台 的 主要 功能 如 图 5-2 所 示 。 


主要 功能 


图 5-2 凡 科 互动 平台 的 主要 功能 
凡 科 互动 的 主要 特色 是 游戏 互动 营销 ， 通 过 将 商家 信息 软 性 植 入 到 游戏 中 ， 让 用 户 在 有 趣 的 娱乐 
互动 中 接受 商家 的 品牌 ， 从 而 提高 销售 转化 率 。 其 特色 功能 如 图 5-3 所 示 。 


图 $-3 ” 凡 科 互动 平台 的 特色 功能 
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2 ”视界 互动 平台 


视界 互动 是 国内 技术 型 H5 的 领跑 者 ， 为 商家 带 来 各 种 形式 的 H5 创 意 设计 与 定制 开发 ， 为 广大 中 
小 商家 量 身 打造 一 站 式 的 高 性 价 比 营销 推广 方案 。 其 主页 如 图 5-4 所 示 。 


xj 视界 互动 


VR COMMERCIALIZATION 


SOLUTION INTEGRATION PROVIDER 
VR 商业 化 解 商 


图 5-4 视界 互动 主页 
视界 互动 的 业务 范围 主要 包括 H5、VR/AR、 内 容 服 务 、 互 联网 整合 营销 、 综 合 平台 推广 等 。 其 
中 ，H5 营 销 的 业务 如 图 5-5 所 示 。 


视界 互动 


图 5-5 视界 互动 H5 的 主要 营销 业务 和 特点 


5.1.3 ”人 人 秀平 台 


人 人 秀 (rrxiu.net) 可 以 帮助 用 户 制作 各 种 精美 的 H5 页 面 ， 如 微 场景 、 创 意 海报 、 微 杂志 、 微 信 
邀请 函 、 场 景 应 用 、 微 信和 贺卡 等 。 

重要 的 是 ， 就 算 你 是 不 懂 设 计 、 不 会 编程 的 新 手 ， 也 可 以 选取 喜欢 的 模板 ， 制 作出 一 个 有 趣 的 H5 
页 面 ， 如 图 5-6 所 示 。 


100 多 种 营销 插件 


图 5-6 人 人 秀 (rrxiunet ) 主页 
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人 人 秀 的 主要 功能 和 特色 如 图 5-7 所 示 。 


图 5-7 人 人 秀 的 主要 功能 和 特色 
人 人 秀 的 “产品 中 心 ” 中 提供 了 100 多 种 营销 插件 ， 如 微 信 红 包 、 大 转盘 抽奖 、 照 片 投票 、VR 全 
景 、 微 信 卡 券 、 问 卷 调查 、 小 游戏 等 。 用 户 通过 简单 的 拖 电 操 作 ， 即 可 轻松 调用 这 些 插 件 ， 实 现 更 好 


的 营销 功能 ， 如 图 5-8 所 示 。 
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图 5-8 人 人 秀 的 5 “产品 中 心 ” 

在 “模板 商店 ”页 面 中 ， 人 人 秀 按照 HS 的 用 途 、 行 业 、 功 能 和 活动 费用 进行 分 类 ， 导 航 功能 非常 

全 面 、 清 晰 ， 而 且 还 支持 自由 搜索 功能 ， 如 图 5-9 所 示 。 同 时 ， 针 对 新 用 户 和 企业 会 员 等 不 同 层次 的 用 
户 ， 还 提供 了 相关 的 福利 ， 极 大 地 增强 了 对 用 户 的 吸引 力 。 


基于 案 : 驮 + 二 供 网 而 [外 二 上 疫 村 一 忆 和 才 VR 全 民 短信 革 入 下 等 长 页 于 者 


于 页 /全 扳机 / 而 


和 
2 
ja 


图 5-9 人 人 秀 的 “模板 商店 ” 
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在 “作品 秀 ” 页 面 中 ， 列 出 了 很 多 互 了 联网、 影视、 银行、 航空、 家电、 学校 等 不 同行 业 的 优秀 企 
业 H5 营 销 方案 ， 如 华为 、 腾 讯 、 百 度 、 阿 里 巴巴 、 口 碑 网 、 爱 奇 艺 、 网 易 等 ， 帮 助 大 家 更 好 地 了 解 和 
学 习 这 些 企业 的 营销 特色 。 

另外 ， 人 人 秀 的 “欢乐 现场 ”板块 为 用 户 带 来 了 一 站 式 的 现场 活动 设计 流程 服务 ， 主 要 服务 如 
图 5-10 所 示 。 


图 5-10 “欢乐 现场 ”的 主要 服务 
“欢乐 现场 ”适用 于 年 会 、 会 议 、 酒 吧 、 婚 礼 、 商 业 活动 、 培 训 、 赛 事 、 校 园 等 不 同 的 场景 ， 为 
企业 带 来 线 上 线 下 的 全 方位 整套 设计 方案 。 
在 人 人 秀平 台 发 布 作品 成 功 后 ， 会 自动 跳 转 至 分 享 推广 界面 ， 同 时 会 出 现 作 品 打分 ， 人 人 秀 系统 
将 会 从 作品 丰富 度 、 功 能 丰富 度 、 作 品 安全 性 、 浏 览 流畅 度 、 版 权 完整 度 等 多 个 方面 对 你 的 作品 进行 
-个 综合 测评 ， 助 你 更 好 地 修改 和 完善 作品 。 


H5 网 页 广告 设计 


设计 H5 页 面 时 可 以 使 用 各 种 平台 来 制作 ， 会 方便 快捷 很 多 。 尤 其 是 各 种 开发 平台 上 还 有 着 各 种 常 
的 功能 ， 可 以 针对 广告 的 特点 或 主题 来 选择 不 同 平台 的 工具 ， 设 计 出 优秀 的 HS 广告 作品 。 


5.2.1 文本 与 动画 设计 


H5 中 的 文本 与 动画 都 是 非常 基础 的 元 素 ， 对 营销 来 说 ， 也 是 用 来 吸引 用 户 关注 的 重要 对 象 ， 因 此 
必须 在 设计 上 多 下 功夫 。 下 面 以 人 人 秀平 台 为 例 ， 介 绍 制作 文本 与 动画 的 一 些 技巧 和 方法 。 
1. H5 文 本 的 制作 
文本 组 件 是 H5 页 面 中 最 重要 的 一 个 组 件 。 在 策划 好 基本 的 文案 内 容 后 ， 新 媒体 美工 需要 将 其 添加 
到 H5 页 面 中 ， 并 进行 合适 的 布局 ， 以 及 调整 其 大 小 、 颜 色 、 背 景 、 排 版 、 阴 影 等 基本 属性 ， 使 其 具有 
统一 的 风格 。 
下 面 详细 介绍 制作 H5 文 本 的 操作 方法 。 
9 STEP 01 在 人 人 秀 H5 设 计 界 面 中 ， 什 单 击 右 侧 功能 栏 “文字 ”按钮 生成 文字 组 件 ， 编 辑 页 中 会 @ 出 现 
一 个 文本 框 ， 全 双击 文本 框 可 以 输入 相应 的 文字 ， 通 过 上 方 的 编辑 栏 可 以 修改 文字 的 字体 类 型 、 字 体 
大 小 、 颜 色 、 字 体 样式 、 对 齐 方式 、 字 体 排版 等 属性 ， 如 图 5-11 所 示 。 
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图 5-11 输入 与 编辑 文字 


@ 字体 类 型 ， 可 选择 默认 字体 ， 也 可 单 击 “ 更 多 字体 ”进入 人 人 秀 在 线 字体 商城 ， 购 买 其 他 字体 。 
@ 字体 大 小 : 选择 对 应 字号 即 可 修改 文字 的 大 小 。 
@ 颜色 : 用 于 设置 字体 颜色 与 背景 色 。 
@@ 字体 样式 ， 加 粗 、 斜 体 、 删 除 线 、 下 划 线 。 
@ ”对 齐 方式 ， 选择 文字 对 齐 方式 ， 包 括 左 对 齐 、 居 中 对 齐 和 右 对 齐 。 
@@ ”字体 排版 :用 于 设置 文字 的 行 间距 、 字 符 间 距 。 
@ 铅笔 按钮 : 单 击 罗 按钮 可 直接 进行 文本 编辑 。 
9 STEP 02 在 文字 上 单 击 鼠 标 右键 ， 还 可 以 执行 复制 、 粘 贴 、 删 除 、 隐 藏 、 复 制 动 画 、 复 制 样式 等 操 
作 ， 也 可 以 对 文本 图 层 进行 管理 ， 如 图 5-12 所 示 。 
9 STEP 03 右 侧 编辑 界面 可 以 设置 文本 的 基础 样式 、 边 框 样式 、 阴 影 调整 等 ， 如 图 5-13 所 示 。 其 中 ， 基 
础 样式 包括 背景 颜色 的 选择 、 图 片 透明 度 的 选择 、 图 片 圆 角 、 文 本 框 边 距 等 调整 ， 适 当 运 用 样式 可 以 
完善 文字 的 视觉 效果 ， 突 出 企业 要 表达 的 相关 信息 。 


手机 要 


图 5-12 右键 快捷 菜单 图 5-13 其 他 样式 设置 
2. H5 动 画 的 制作 
在 H5 页 面 中 给 一 些 文字 或 图 像 适当 地 添加 一 些 动画 ， 可 以 让 画面 更 活 泌 有 趣 。 具 体操 作 步 又 如 下 。 
9 STEP 01 @Q 选 择 要 添加 动画 效果 的 元 素 ， 在 右 侧 窗口 中 全 切换 至 “动画 ”选项 卡 ， 全 单 击 “ 添 加 动 
画 ” 按 钮 ， 如 图 5-14 所 示 。 其 中 动画 的 触发 方式 有 “进入 页 面 ” 和 “事件 ”， 和 外 选择 “进入 页 面 ” 选 
项 ， 如 图 5-15 所 示 。 
@ STEP 02 “动画 类 型 ”中 包括 进入 效果 、 强 调 效果 和 退出 效果 3 大 类 型 ， 用 户 可 根据 需求 选择 不 同 的 
动画 效果 ， 同 时 也 还 可 以 设置 动画 的 方向 ， 如 图 5-16 所 示 。“ 持 续 ” 表 示 动 画 出 现 的 持续 时 间 ， 默 认 


为 1 秒 ， 用 户 可 根据 需求 设置 成 任意 数值 ， 如 图 5-17 所 示 。 


图 5-14 单 击 “添加 动画 ”按钮 


图 5-16 动画 类 型 菜单 


9 STEP 03 @ “延迟 ”用 于 设置 延迟 动画 出 现 的 时 间 ， 用 户 可 以 根据 需要 进行 修改 。 


第 5 章 ”新 媒体 H5 广 告 设计 


六 


图 5-15 选择 “进入 页 面 ” 选 项 


图 5-17 “持续 ”设置 
“动画 播放 次 数 ” 


用 于 设置 动画 播放 的 次 数 ，@ 设 置 为 -1 时 将 循环 播放 ， 如 图 5-18 所 示 。 合 再 次 单 击 “ 添 加 ”按钮 ， 可 
以 为 同一 个 对 象 @ 添 加 第 二 个 动画 效果 ， 合 并 设置 需要 的 选项 ， 如 图 5-19 所 示 。 


图 5-18 设置 “延迟 ”和 动画 播放 次 数 


图 5-19 添加 第 二 个 动画 效果 
9 STEP 04 单 击 “ 播 放 ” 按 钮 ， 即 可 预览 文字 动画 效果 ， 如 图 5-20 所 示 。 


手机 机 影 构图 大 全 


图 5-20 ”预览 动画 效果 
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下 面 介绍 几 种 常见 的 H5 页 面 动 画 效果 的 制作 方法 。 
(1) 物体 移动 类 动画 。 以 物体 上 升 为 例 〈 持 续 向 上 ， 后 逐渐 消失 ) ， 选 中 素材 ， 单 击 右 侧 动画 
栏 进行 动画 设置 ， 选 择 退出 动画 ， 注 意 方向 为 { ， 动 画 效果 如 图 5-21 所 示 。 


手机 锡 影 构图 大 全 手机 得 影 交 图 大 全 


图 5-21 物体 移动 类 动画 的 设置 方法 与 效果 
(2) 聚合 类 动画 。 以 两 种 图 片 合 并 为 例 〈 两 侧 图 片 聚拢 ， 类 似 关门 ) ， 分 别 添加 对 应 的 两 张 图 
片 ， 在 右 侧 动 画 栏 设置 动画 ， 设 置 对 应 的 “ 渐 入 ”动画 ， 方 向 设置 为 相反 〈 左 入 与 右 入 ) ， 动 画 效 果 
如 图 5-22 所 示 。 


es 手机 氢 影 构图 大 全 手机 再 影 构图 大 全 


图 5-22 聚合 类 动画 的 设置 方法 与 效果 
应 用 动画 元 素 可 以 增强 H5 页 面 的 交互 性 ， 让 H5 不 再 像 PPT 一 样 ， 看 起 来 非常 无 聊 ， 可 以 在 其 中 充 
分 展现 你 的 创意 ， 吸 引用 户 关注 和 分 享 。 


5.2.2 ”交互 跳 转 页 面 设计 


单 击 触 发 事件 主要 是 使 H5 具 有 各 种 交互 功能 ， 使 H5 不 同 于 传统 的 平面 广告 ， 只 是 用 户 单方 面 观 
看 ， 而 是 可 以 让 用 户 深度 参与 到 H5 中 ， 带 来 更 好 的 互动 效果 。 
1. 插入 跳 转 链接 
跳 转 链接 是 H5 页 面 中 常常 会 用 到 的 单 击 触发 事件 。 企 业 可 以 在 H5 中 添加 各 种 商品 、 店 铺 和 活动 
链接 ， 让 用 户 快速 直达 到 相应 的 页 面 ， 快 速 实现 H5 引 流 。 
9 STEP 01 以 人 人 秀 为 例 ， 进 入 H5 编 辑 器 ， 生 选择 要 添加 链接 的 按钮 ， 在 右 侧 窗口 外 切换 至 “ 单 击 ” 选 
项 卡 ， 全 在 “触发 ”列表 框 中 选择 “ 跳 转 外 链 ” 选 项 ， 如 图 5-23 所 示 。 
9 STEP 02 在 下 方 @ 弹 出 的 “网 址 ”人 处， 用户 可 根据 需求 全 添加 任意 网 址 链接 ， 添 加 后 即 可 进行 跳 转 ， 
如 图 5-24 所 示 。 
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图 5-24 设置 跳 转 网 址 

9 STEP 03 @Q 单 击 界面 上 方 的 “音乐 ”按钮 ， 弹 出 相应 面板 ， 全 单 击 “更 换 ” 按 钮 ， 如 图 5-25 所 示 。 
弹出 相应 对 话 框 ， 用 户 可 以 在 音乐 库 中 寻找 需要 的 音效 ， 可 以 单 击 “ 我 的 ”进行 自 定义 上 传 ， 全 单 击 
“选择 ”按钮 ， 即 可 设置 音效 ， 如 图 5-26 所 示 。 


竹 机 项 时 加 国 大 全 
wmv -am 
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图 5-25 单 击 “更 换 ” 按 钮 图 5-26 ”音效 设置 
9 STEP 04 保存 修改 后 ， 预 览 H5 页 面 ，@ 单 击 其 中 的 “ 抢 优惠 券 ” 按 钮 ，@ 即 可 跳 转 到 设置 的 链接 页 
面 ， 如 图 5-27 所 示 。 


手机 更 影 初 图 大 全 > 
[ 同 平 去 | GD 大 礼 
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图 5-27 预览 跳 转 链接 效果 
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2. 插入 事件 动画 
在 H5 的 表单 或 者 互动 游戏 中 ， 经 常会 用 到 事件 动画 功能 ， 不 仅 可 以 让 画面 更 有 趣 ， 而 且 可 以 帮助 

企业 完成 很 多 营销 任务 ， 如 购买 、 报 名 、 关 注 等 。 
9 STEP 01 以 人 人 秀 为 例 ， 进 入 H5 编 辑 器 ，@ 选 择 要 添加 链接 的 按钮 ， 全 在 右 侧 窗 口 切 换 至 “ 单 击 ” 选 
项 卡 ， 全 选择 “事件 ”选项 ，@ 并 设置 相应 的 事件 名 称 ， 如 图 5-28 所 示 。 


图 5-28 设置 触发 事件 
9 STEP 02 和 @ 选 择 相应 的 图 片 ， 四 在 右 侧 窗口 切换 至 “动画 ”选项 卡 ， 和 加 在 “方式 ”下 拉 列 表 框 中 选择 
“事件 ”选项 ，@ 并 设置 相应 的 事件 名 称 ( 与 前 面 设置 的 事件 名 称 一 致 ) ， 回 然后 设置 相关 的 动画 参 


数 ， 如 图 5-29 所 示 。 


图 5-29 设置 “事件 ”动画 
9 STEP 03 @ 然 后 单 击 项 部 的 “图 层 ” 按 钮 图 ， 人 @ 展 开 “ 图 层 ”面板 ， 合 隐藏 该 图 片 所 在 的 图 层 即 可 ， 
如 图 5-30 所 示 。 


图 5-30 ”隐藏 相应 图 层 
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9 STEP 04 保存 H5 后 ， 预 览 事件 触发 效果 ， 单 击 页 面 中 的 “购买 ”按钮 ， 可 以 看 到 商品 图 片 会 慢 慢 浮现 
出 来 ， 效 果 如 图 5-31 所 示 。 


大 片 这 公 拍 ! 大 片 这 从 拍 ! 大 片 这 肥 拍 1 
手机 提 影 高 手 新 玩法 手机 投影 高 手 新 玩法 手机 投影 高手 新 玩法 
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图 5-31 预览 事件 动画 效果 


pee TT 
| 后 家 捐 点 ) 如 妇 休 美工 设计 E53 时， 可 以 多 设计 一 些 能 够 引起 用 户 共 帮 和 参与 的 功能 ， 通 过 与 
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5.2.3 ”H5 互 动 游戏 设计 


在 设计 H5 时 添加 一 些 可 以 互动 的 游戏 ， 通 过 娱乐 方式 吸引 用 户 ， 能 帮助 企业 实现 更 加 精准 的 营 
销 。 例 如 ， 通 过 H5 互 动 游戏 的 方式 为 企业 培养 一 群 核心 用 户 ， 并 在 游戏 中 给 出 优惠 券 让 用 户 可 以 线 下 
消费 ， 给 出 积分 让 用 户 去 兑换 商品 等 ， 这 些 都 可 以 进一步 提升 用 户 对 企业 的 好 感度 。 
下 面 以 人 人 秀 为 例 ， 介 绍 在 H5 页 面 中 添加 互动 游戏 的 操作 方法 。 
9 STEP 01 进入 人 人 秀 产品 中 心 ， 在 “游戏 营销 ”列表 中 选择 相应 的 游戏 类 型 ， 最 好 是 可 以 紧 扣 热点 的 游 
戏 ， 这样 可 以 快速 引起 用 户 的 关注 ，@ 如 “ 寻 碑 谷 ?2”， 如 图 5-32 所 示 。 可 以 扫 码 预览 游戏 ，@ 单 击 “ 立 
即 制作 ”按钮 ， 如 图 5-33 所 示 。 在 游戏 中 植 入 广告 ， 这 种 营销 方式 非常 隐 性 ， 更 容易 被 用 户 所 接受 。 


i 人 0 二 4 
图 5-32 ”选择 相应 的 游戏 类 型 图 5-33 单 击 “立即 制作 ”按钮 
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9 STEP 02 进入 到 人 人 秀 H5 编 辑 器 ， 选 择 游戏 模板 后 ， 人 @ 单 击 右 侧 的 “游戏 设置 ”按钮 ， 如 图 5-34 所 
示 。@ 弹 出 “基本 设置 ”对 话 框 ， 合 在 此 可 以 设置 活动 名 称 、 开 始 时 间 、 结 束 时 间 、 活 动 地 区 、 活 动 
规则 及 内 容 、 关 注 公众 号 等 基本 信息 ， 如 图 5-35 所 示 。 


2 二 


四 设置 


图 5-34 单 击 “游戏 设置 ”按钮 图 5-35 基本 设置 
9 STEP 03 在 “抽奖 ”选项 卡 中 ， 可 以 设置 抽奖 条 件 分 数 、 每 日 抽奖 次 数 以 及 奖品 类 型 等 ， 如 图 5-36 所 
示 。 抽 奖 是 游戏 吸引 用 户 参与 和 分 享 的 动力 所 在 ， 除 非 你 的 游戏 形式 特别 诱 人 ， 否 则 建议 大 家 还 是 要 
设置 一 个 抽奖 环节 。 
9 STEP 04 在 “排行 榜 ” 选 项 卡 中 ， 可 以 选择 排行 榜 的 类 型 ， 显 示 排 行 数 以 及 好 友 PK 和 排行 榜 奖 品 等 选 
项 ， 如 图 5-37 所 示 。 通 过 排行 榜 可 以 激发 用 户 的 争 强 好 胜 之 心 ， 扩 大 企业 的 活动 宣传 范围 。 


[eeT Tw Te IE * E 
设置 
| ms 
图 5-36 “抽奖 ”选项 卡 图 5-37 “排行 榜 ” 选 项 卡 


9 STEP 05 在 “ 领 奖 人 信息 ”选项 卡 中 ， 可 以 选择 用 户 领 奖 时 需要 填写 的 信息 ， 如 姓名 、 性 别 、 手 机 、 
邮箱 、 地 址 等 ， 建 议 只 需要 选择 姓名 和 手机 即 可 ， 避 免 该 环节 过 于 复杂 ， 反 而 引起 用 户 的 反感 ， 
如 图 5-38 所 示 。 

@ STEP 06 切换 至 “样式 设置 ”选项 卡 ， 用 户 可 以 设置 游戏 页 面 中 的 各 个 元 素 ， 可 以 将 其 替换 为 自己 的 
LOGO、 产 品 等 图 片 ， 如 图 5-39 所 示 。 

9 STEP 07 保存 并 发 布 HS 后， 即 可 体验 互动 游戏 效果 ， 如 图 5-40 所 示 。 这 样 可 以 降低 用 户 对 于 企业 宣传 
的 反感 度 ， 提 高 用 户 的 存留 率 ， 让 他 们 在 玩 游戏 的 同时 接受 企业 的 宣传 广告 。 
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图 5-38 “和 领 奖 人 信息 ”选项 卡 图 5-39 “样式 设置 ”选项 卡 


图 5-40 预览 HS 互动 游戏 
游戏 是 非常 重要 的 H5 营 销 功 能 ， 几 乎 所 有 的 热门 H5 营 销 案 例 都 使 用 了 游戏 营销 。 新 媒体 美工 在 
设计 页 面 时 可 以 将 游戏 场景 中 的 图 片 更 换 为 自己 的 营销 素材 。 当 然 ， 这 些 素材 的 安排 要 合理 ， 不 能 出 
现 得 太 牵 强 ， 否 则 会 让 人 看 上 去 觉得 很 奇怪 。 
利用 游戏 营销 可 以 增加 用 户 观 看 广告 的 时 间 ， 更 加 深入 地 了 解 企业 的 信息 ， 同 时 对 于 参与 游戏 的 
用 户 可 以 让 他 们 参与 抽奖 。 不 过 抽奖 门槛 应 尽 可 能 设置 得 低 一 些 ， 将 企业 的 抵 用 券 、 优 惠 券 等 作为 奖 
品 ， 吸 引用 户 到 店 消费 。 


5.2.4 Ho5 抽 奖 活动 设计 


为 了 吸引 用 户 积 极 参与 活动 ， 企 业 还 可 以 为 HS 设置 抽奖 、 排 行 榜 、 发 券 、 信 息 收集 等 信息 。 

e@STEP 01 进入 H5 编 辑 器 ，@ 新 建 一 个 模板 页 面 ， 删 除 其 中 多 余 的 元 素 ， 合 在 “互动 ”菜单 中 单 击 “ 
奖 ” 标 签 ， 如 图 5-41 所 示 ， 为 H5 页 面 添 加 一 个 抽奖 插件 。 

9 STEP 02 添加 抽奖 插件 后 ， 人 @ 移 动 至 合适 位 置 ， 倒 单 击 右 侧 的 “抽奖 设置 ”按钮 ， 来 完善 H5 营 销 的 
奖 互 动 活动 ， 否 则 抽奖 活动 将 无 法 顺利 进行 ， 如 图 5-42 所 示 。 

9 STEP 03 首先 是 基本 设置 ， 包 括 填 写 活动 名 称 、 设 置 开始 时 间 和 结束 时 间 以 及 显示 方式 ， 如 图 5-43 所 
示 。 需 要 注意 的 是 ， 活 动 名 称 将 是 用 户 在 后 台 查 看 数据 时 的 分 组 依据 ， 必 须 准 确 填写 ; 如 果 用 户 的 参 
与 时 间 不 在 设置 的 范围 之 内 ， 则 将 无 法 参与 抽奖 活动 。 在 显示 方式 菜单 中 ， 可 以 选择 转盘 、 九 富 格 、 


摇 一 摇 等 3 种 不 同 的 抽奖 皮肤 。 
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每 日 大 有 等 你 来 拉 


图 5-42 单 击 “ 抽 奖 设置 ”按钮 
9 STEP 04 然后 是 奖品 设置 ， 包 括 奖品 名 称 、 奖 品类 型 、 奖 品 数量 、 中 奖 概率 等 ， 修 改 相应 的 图 标 、 奖 
品名 称 与 奖品 类 型 ， 如 图 5-44 所 示 。 


1 昌 基地 六 ° % 
20 3 wws5 一 oo 0 % 
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78 浏 老人 5S 奖品 oo0 0 
0 避 全 寺 生 与 二 10 100 % 
过 100 
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XK. 
mE 至 3 
图 5-43 基本 设置 图 5-44 奖品 设置 


9 STEP 05 右 侧 的 奖品 类 型 有 非 奖 品 、 实 物 奖 、 竞 奖券、 第 三 方 发 奖 、 红 包 、 微 信 卡 券 共 6 种 。 选 择 奖 
品类 型 后 会 出 现 相 应 的 奖品 设置 ， 若 想 要 更 改 设置 ， 可 单 击 右 侧 + 按 钮 更 改 。 例 如 ， 在 奖品 类 型 中 选 
择 “ 实 物 奖 ”选项 ， 还 可 以 设置 兑奖 方式 、 领 奖 人 信息 及 中 奖 提示 等 选项 ， 如 图 5-45 所 示 。 

9 STEP 06 在 奖品 设置 中 ， 最 左 侧 的 笑脸 可 以 用 来 替换 奖品 图 片 ， 如 图 $-46 所 示 。 可 以 单 击 笑脸 上 传 自 
制 的 商品 图 标 和 兑奖 券 图 标 ， 图 片 标 准 大 小 为 50 像 素 x 50 像 素 ， 超 过 则 会 自动 压缩 ， 只 要 图 片 不 过 
大 ， 都 不 会 明显 失真 ， 用 户 可 以 放心 上 传 。 

9 STEP 07 接 下 来 是 抽奖 设置 ， 用 户 可 以 分 别 对 参与 者 的 抽奖 次 数 、 中 奖 次 数 和 总 中 奖 次 数 3 个 选项 进 
行 设置 ， 如 图 5-47 所 示 。 然 后 是 领 奖 设置 ， 可 以 在 此 选择 所 需要 的 用 户 信息 ， 如 图 5-48 所 示 。 
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ER 


图 5-45 “实物 奖 ” 设 置 图 5-46 替换 奖品 图 片 
TT TT 


2 数 


全 人 虹 厅 交 中 
生生 天 组 机 中 
Et 从 
分 束 EHR 一 次 二 和 会 
Wf 
雪耻 负 ( 宣 过) 
本职 (加 三 ) 


™ 区 2Z3 mm ED 
a 47 ”抽奖 设置 RS 领 奖 设 置 


hs 3) 当 鼠标 移动 到 领 奖 信息 的 革 个 选项 上 时 ， 会 显示 此 项 的 详细 介绍 。 参与 者 在 领 : 
点 奖 时 ， 需要 先 对 领 奖 信息 表单 进行 填写 。 : 


© STEP 08 最 后 是 样式 设置 ， 可 以 让 自己 的 抽奖 活动 更 加 个 性 化 ， 如 图 5- Do 设置 完成 后 ， 
“保存 ”按钮 ， 即 可 完成 信息 的 设置 ， 如 图 5-50 所 示 。 


每 日 大 奖 等 你 来 抽 记 9 


图 5-49 样式 设置 图 5-50 保存 设置 
© STEP 09 保存 并 发 布 H5 后 ， 即 可 体验 抽奖 活动 效果 ， 如 图 5-51 所 示 。 
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每 日 大 问 等 你 来 抽 每 日 大 奖 等 你 来 抽 
图 5-51 预览 抽奖 活动 
HS 营销 带 有 的 商业 标志 及 强烈 的 营利 性 质 ， 在 一 定 程度 上 缩小 了 H5 作 品 的 用 户 定位 范围 。 但 是 
通过 兴趣 点 进行 互动 仍然 是 营销 的 重要 途径 ， 如 抽奖 、 红 包 或 者 小 游戏 等 ， 这 些 都 是 吸引 用 户 的 主要 
方式 。 


了 Ei 。 有 些 企业 为 了 让 浏览 H5 的 用 户 强制 关注 企业 的 向 信 公众 号 ,使 用 强制 关注 功 
| 专家 指点 ) 能 。 在 人 人 秀平 台 上 ， 使 用 红包 、 抽 奖 和 照片 投票 功能 时 ， 可 以 在 页 面 的 右 侧 或 者 
， 设置 界 面 中 ， 看 到 一 个 “关注 公众 号 参与 活动 ” 复 选 框 ， 选 中 后 即 可 实现 强制 关注 功能 。 | 
”需要 注意 的 是 ， 微 信 严 格 禁 止 各 种 诱导 分 享 和 强制 关注 ， 因 此 在 微 信 中 使 用 该 功能 是 具有 一 
” 定 风险 的 。 如 果 公 众 号 的 粉丝 数 过 少 ( 少 于 3000 人 ) ， 却 为 了 迅速 吸 粉 ， 而 通过 多 种 方式 快速 涨 
， 粉 ， 容 易 引起 微 信 公 众 平台 的 注意 ， 导 致 公众 号 被 封 。 : 
”例如 ， 人 人 秀平 台 上 禁止 下 面 行为 。 

; 多 在 H5 页 面 中 直接 提 及 关注 后 领 红包 。 


5.2.5 “投票 问卷 在 线 表单 设计 


通过 H5 开 发 平台 ， 新 媒体 美工 可 以 在 设计 活动 中 嵌入 投票 或 答题 问卷 等 在 线 表 单 ， 支 持 导出 表单 
信息 。 投 票 活动 是 一 种 与 众 筹 非常 类 似 的 活动 。 企 业 可 以 在 H5 中 添加 一 些 投票 活动 抽奖 ， 并 设置 相应 
的 奖励 机 制 ， 可 以 用 来 快速 吸 粉 、 增 粉 。 

问卷 调查 是 一 种 用 于 收集 用 户 信息 、 反 馈 和 喜好 的 活动 。 新 媒体 美工 可 以 制作 问卷 调查 H5 页 面 ， 
对 消费 者 意愿 进行 调查 ， 从 而 知晓 用 户 的 购买 意向 。 问 卷 调查 的 功能 与 在 线 表 单 看 上 去 比较 相似 ， 但 
各 有 各 的 长 处 。 表 单 善 于 收集 用 户 信息 ， 而 问卷 调查 则 可 以 获取 更 多 的 用 户 意向 和 行为 ， 如 调查 用 户 
常用 的 洗 发 水 品牌 、 用 户 最 喜欢 玩 的 手 游 等 。 

下 面 以 人 人 秀 为 例 ， 介 绍 在 H5 页 面 中 添加 投票 问卷 在 线 表 单 的 操作 方法 。 
9 STEP 01 在 人 人 秀 编辑 器 中 ，@ 单 击 “ 互 动 ”按钮 展开 其 操作 面板 ，@ 选 择 “ 问 卷 调查 ”插件 ， 合 即 可 
插入 并 设置 “问卷 调查 ”插件 ， 如 图 5-52 所 示 。@ 在 右 侧 的 面板 中 单 击 “ 设 置 ”按钮 ， 如 图 5-53 所 示 。 

9 STEP 02 在 “基本 设置 ”选项 卡 中 可 以 设置 投票 问卷 的 活动 名 称 、 开 始 时 间 、 结 束 时 间 等 ，@ 单 击 投 
票选 项 右 侧 的 “设置 ”按钮 ， 如 图 5-54 所 示 ， 可 以 设置 投票 的 具体 选项 ， 合 在 文本 框 中 输入 文字 ， 

全 单 击 “ 添 加 ”按钮 ， 如 图 5-55 所 示 。 


做 


第 5 章 ， 新 媒体 H5 广 告 设计 


图 5-52 ”插入 “问卷 调查 ”插件 图 5-53 单 击 “设置 ”按钮 


问卷 调查 非常 适合 一 些 时 间 比 较 紧急 、 不 方便 统一 答案 数量 的 场景 ， 而 且 还 可 
以 作为 投票 选举 活动 的 工具 。 : 


选项 没 置 
加 单 二 
w= EN | 
图 5-54 单 击 “ 设 置 ” 按 钮 图 5-55 单 击 “ 添 加 ”按钮 


9 STEP 03 @ 即 可 设置 其 中 的 一 个 选项 ，@ 继 续 输入 文字 ， 如 图 5-56 所 示 ， 添 加 多 个 选项 后 ，@ 单 击 右 
下 角 的 “保存 ”按钮 ， 如 图 5-57 所 示 ， 即 可 保存 选项 。 


选 豆 设置 选项 设置 
asiml 二 -| 四 输入 可 
a 3 
~ [= 
[= | 
加 设置 完成 嘻 


@ 单 二 


y 
= EN ma rN 


添加 。 : 
9 STEP 04 @ 切 换 至 “样式 设置 ”选项 卡 ， 全 在 此 选项 卡 中 可 以 设置 投票 按钮 的 名 称 与 风格 样式 ， 设 置 
完成 后 ， 全 单 击 “ 保 存 ”按钮 ， 如 图 5-58 所 示 。 估 设置 完成 的 选项 将 显示 在 页 面 ， 如 图 5-59 所 示 。 
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图 5-58 “样式 设置 ”选项 卡 图 5-59 设置 后 的 效果 
9 STEP 05 用 户 打开 H5 页 面 后 ， 可 以 选择 相应 数量 的 选项 ， 单 击 “ 投 票 ”按钮 ， 即 可 参与 问卷 调查 ， 并 
显示 全 部 的 投票 情况 ， 如 图 5-60 所 示 。 同 时 ， 企 业 也 可 以 利用 各 种 互动 功能 ， 将 用 户 调查 问卷 H5 活 动 
自发 地 广泛 传播 出 去 。 
EETTTITEEES [EEC 


图 5-60 预览 H5 用 户 调查 活动 效果 


您 的 职业 是 全 您 的 职业 是 ? 
sme 


包 H5 活 动 设计 


当 微 信 推 出 红包 功能 后 ， 红 包 就 一 直 是 人 们 关注 的 重点 。 尤 其 是 新 年 期 间 ， 微 信和 群 几乎 被 红包 引 
爆 ， 朋 友 圈 被 红包 活动 刷 屏 。 红 包 如 今 已 经 成 为 企业 在 线 上 线 下 吸 粉 引流 的 高 效 工具 。 红 包 最 容易 引 
起 人 们 的 注意 ， 是 一 个 有 效 的 引流 入 口 ， 营 销 者 应 在 H5 的 推广 内 容 中 多 多 添加 “红包 ”关键 词 。 

下 面 以 人 人 秀 为 例 ， 介 绍 在 H5 页 面 中 添加 微 信 红 包 活 动 的 操作 方法 。 

9 STEP 01 打开 人 人 秀 编辑 器 ， 选 择 相应 模板 ， 删 除 多 余 元 素 。@ 单 击 “ 互 动 ”按钮 ， 展 开 其 操作 面 
板 ，@ 选 择 “ 微 信 红 包 ” 插 件 ， 合 即 可 插入 “ 微 信 红 包 ” 插 件 ， 如 图 5-61 所 示 。@ 单 击 右 侧 的 “红包 
设置 ”按钮 ， 如 图 5-62 所 示 。 

9 STEP 02 @ 弹 出 “基本 设置 ”对 话 框 ,人 @ 在 此 可 以 设置 红包 的 活动 时 间 、 活 动 总 金额 ( 单 次 金额 不 能 
低 于 10 元 ) 、 红 包 金 额 ( 最 低 1 元 ， 最 高 200 元 ) 、 中 奖 率 ( 中 奖 率 最 低 20% ) 、 是 否 人 允许 重复 抢 红 包 
( 针对 抢 到 0 元 用 户 ) 等 基本 属性 ， 如 图 5-63 所 示 。 

9 STEP 03 在 “高 级 设置 ”面板 中 ， 还 可 以 进行 位 置 限制 、 分 享 后 获得 一 次 额外 抽奖 机 会 、 时 段 红包 、 
红包 弹 幕 ( 提高 抽奖 气氛 ) 以 及 公众 号 关注 后 领 红包 等 高 级 设置 ， 如 图 5-64 所 示 。 
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图 5-62 单 击 “红包 设置 ”按钮 


nna |10 (E10 ) = < 
条 红色 ; 0 元始。 六 让 I 
Bt 
i 1 县 全 元， 机 200 元 @ 设 置 分 可 后 区 各 一 攻守 站 全 
4 [20 (P20 ) 寺 耻 红包 更 天 | 说 2 次 ,二 入 J00 元 
| RE 元 可 关 所 入) 
je Tar 后 名 T 外 ”用 说 胡 
| 人 和 
图 5-63 ” 微 信 红包 设置 图 5-64 “高 级 设置 ”面板 


9 STEP 04 在 “信息 设置 ”面板 中 ， 可 以 设置 微 信 红包 的 活动 名 称 、 公 司 名 称 、 活 动 祝福 以 及 活动 备注 
等 选项 ， 如 图 5-65 所 示 。 

9 STEP 05 在 “样式 设置 ”面板 中 ， 可 以 设置 红包 的 样式 ， 用 户 可 以 根据 需要 来 选择 ， 单 击 “ 修 改 ” 按 
钮 ， 可 以 修改 活动 文本 ， 如 图 5-66 所 示 。 


“| | ESE ET-™ m= RE 
Ta 红 s 
ee na mcs aas ee 
图 5-65 “信息 设置 ”面板 图 5-66 “样式 设置 ”面板 


9 STEP 06 单 击 “ 保 存 ”按钮 ， 弹 出 充值 提示 ， 用 户 根据 提示 为 红包 进行 充值 即 可 ， 如 图 5-67 所 示 。 

9 STEP 07 在 “ 微 信 红包 ”选项 区 中 ， 单 击 “ 高 级 功能 ”链接 ， 企 业 可 以 根据 自己 的 需要 选择 开启 更 多 
的 高 级 功能 ， 如 图 5-68 所 示 。 

9 STEP 08 保存 并 发 布 H5 页 面 后 ， 即 可 查看 微 信 红 包 的 活动 效果 ， 如 图 5-69 所 示 。 通 过 结合 H5 页 面 与 微 
信 红 包 的 活动 玩法 ， 不 但 可 以 让 用 户 体验 到 Hs 的 丰富 、 有 趣 的 互动 活动 ， 而 且 还 可 以 体验 在 微 信 中 拆 


红包 的 真实 感受 。 


oa 
企业 免费 版 企业 体验 版 企业 标准 版 此 高 名 
100 元 7 不 形 
4 v v ee 
10%+2% 10%+2% 3%+2% % 
x Vv ~v ~ 
如 ~ ~ 
二 x x ~v ~ 
是 否 立 即 充值 x 3 v v 
x x v ~ 
活动 发 放 总 全 额 : 10 x x ~ ~v 
已 发 的 多 额 :0 x x ~ ~v 
剩余 发 帮 金 额 : 10.00 x x v v 
账 上 作客 :0 x x 2 a 
使 用 9 公公 呈 名 中 和 ~ 
ma | | -一 -> ”Er 
图 5-67 弹出 充值 提示 图 5-68 开启 更 多 的 高 级 功能 


大 礼 
送 不 售 


输入 口令 即 可 领取 


图 5-69 预览 H5 红 包 活动 效果 
当 企业 的 活动 规模 比较 大 时 ， 也 可 以 使 用 “自己 公众 号 发 红包 ”功能 来 宣传 品牌 ， 实 现 更 好 的 引 
流 和 宣传 的 效果 。 人 人 秀平 台 上 的 企业 高 级 版 及 以 上 的 客户 可 以 通过 绑 定 自 身 微 信 公 众 号 的 服务 ， 由 
和 人 


人 人 秀平 台 上 的 微 信 红 包 有 很 多 种 不 同 的 类 型 ， 如 口令 红包 、 语 音 红包 、 分 时 | 
| 发 放 、 裂 变 红包 、 流 量 红包 、 一 人 一 码 和 VR 红包 等 多 种 样式 ， 可 以 满足 企业 在 不 
i 同 场景 的 不 同 需求 ， 帮 助 企 业 达 到 快速 宣传 、 促 销 的 目的 。 
: 需要 注意 的 是 ， 在 给 H5 中 的 红包 进行 充值 时 ， 人 人 秀和 微 信 平台 会 根据 企业 的 充值 金额 抽取 
| 少量 的 服务 费 和 渠道 费用 。 


据 数 据 统 计 ， 微 信 朋 友 圈 营 业 额 在 1 年 内 可 以 达到 1500 亿 元 以 上 。 由 此 
将 自己 的 朋友 圈 设 计 得 有 个 性 一 


可 见 ， 微 信 朋 友 圈 是 一 个 


绝 佳 的 销售 场所 ， 


些 ， 可 以 让 更 多 人 记 住 你 ， 从 而 达到 提高 销售 额 的 目的 


头像 是 最 佳 的 广告 位 
好 的 昵称 就 是 品牌 
个 性 签名 字 字 千金 
商业 价值 
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* 一 位 村 时 呈 双 书 作 
家 .省 宫 人 


所作 500 多 各 本 
技法 
手机 摄影 构图 大 全 公众 号 创始 人 
美 注 灶 、 你 他 能 成 为 三 蜂 大 俩 1! 
一 
龙 飞 


08,op 国生 站 和 和 
| 而 上 ， 只 为 那 最 后 一 望 。 
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巴 彦 济 尔 -he 其 坚 官 、 顽 强 的 … 


名 人 版 朋友 图 设 计 
简介 版 朋友 圈 设 计 
店 招 版 朋友 圈 设 计 


Eulll OW/sO 
万 朋友 圈 


APPLE 
昔 果 工作 室 创始 人 


区 超级 海报 大 合集 


昨天 本 村、 如 何 做 好 促销 活动 的 宣传 
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卫 且 前期 准备 : 微 信 朋 友 图 设计 要 点 


现在 微 信 朋 友 圈 的 主要 消费 者 是 年 轻 人 。 大 多 数 年 轻 人 将 个 性 放 在 首位 ， 讲 究 潮 流 和 时 尚 。 因 
此 朋友 图 要 做 好 营销 ， 首 当 其 冲 的 就 是 要 做 好 个 性 营销 ， 满 足 他 们 要 不 我 第 一 、 要 不 我 唯一 的 独特 个 
性 。 实 现 与 他 们 思维 的 同 频 ， 达 到 共鸣 和 共振 ， 才 能 更 好 地 拉 近 与 他 们 的 距离 ， 实 现 营销 。 


6.1.1 头像 是 最 佳 的 广告 位 


现在 都 讲 视觉 营销 ， 也 讲 位 置 的 重要 性 ， 而 微 信 朋 友 圈 首先 进入 大 家 视野 的 就 是 微 信 的 头像 。 可 
以 说 ， 这 小 小 的 头像 图 片 ， 却 是 微 信 和 最 引 人 注 目的 广告 位 ， 我 们 一 定 要 用 好 ， 不 要 浪费 了 ! 

在 笔者 的 微 信 朋 友 圈 里 ， 有 几 千 个 朋友 ， 我 对 他 们 的 头像 进行 了 分 析 总 结 ， 普 通 人 的 头像 两 种 图 
片 最 多 : 一 是 自己 的 人 像 照 片 ; 二 是 拍 的 或 选 的 风景 照片 。 

但 是 侧重 营销 的 人 ， 即 使 用 人 物 照片 ， 也 应 该 使 用 一 定 的 技巧 ， 让 效果 更 上 一 层 楼 。 其 中 3 类 照片 
用 得 多 : 一 是 自己 非常 有 专业 范 的 照片 ， 二 是 与 明星 的 合影 ， 三 是 自己 在 重要 、 公 众 场合 上 的 照片 。 

不 同 的 头像 ， 传 递 给 人 不 同 的 信息 ， 注 重 营销 的 朋友 ， 建 议 根据 自己 的 定位 来 进行 设置 ， 可 以 从 
这 几 个 方面 着 手 ， 如 图 6-1 所 示 。 


图 6-1 朋友 图 头像 设置 的 技巧 

以 上 的 头像 图 片 ， 是 不 是 比 常规 的 显得 更 有 范 ， 视 觉 效 果 更 美 ? 设置 微 信 头像 的 方法 很 简单 。 具 
体操 作 步 又 如 下 。 

9 STEP 01 打开 微 信 ，@ 单 击 右 下 角 的 “我 ”图 标 ， 合 单 击 最 上 面 一 行 的 “ 微 信号 ”头像 或 名 称 ， 如 
图 6-2 所 示 ， 合 进入 “个 人 信息 ”界面 ，@ 单 击 “ 头 像 ” 名 称 ， 如 图 6-3 所 示 。 
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微 信 Q 十 
至 
ee 
@ 单 二 
章 收藏 
区 相册 更 多 
夯 卡 包 
@ ee 我 的 地 址 
@@ 单 击 
器 设 坪 
2 
图 6-2 单 击 “ 微 信号 ”头像 图 6-3 单 击 “头像 ” 名 称 


9 STEP 02 弹出 “图 片 ”界面 ，@@ 用 户 可 以 单 击 “ 拍 摄 照 片 ”按钮 ，@ 还 可 以 直接 单 击 照 片 ， 如 图 6-4 
所 示 。 拍 好 或 选 好 照片 ， 按 提示 操作 完成 后 ， 合 即 可 得 到 设置 好 的 头像 效果 ， 如 图 6-5 所 示 。 


图 6-4 单 击 照片 图 6-5 设置 的 头像 效果 
用 户 可 以 参照 上 述 方法 ， 将 头像 换 成 对 自己 最 为 有 利 的 各 种 图 像 。 但 切记 ， 一 定 要 让 对 方 感到 真 


实 ， 有 安全 感 ， 这 样 对 方才 会 更 加 信赖 自己 ， 而 信任 是 好 的 营销 的 开始 。 


6.1.2 ”好 的 昵称 就 是 品牌 


头像 给 人 的 是 第 一 视觉 形象 ， 而 昵称 给 人 的 是 第 一 文字 形象 。 从 营销 的 角度 来 看 ， 好 的 名 称 自 带 
品牌 和 营销 功能 ， 它 是 虚拟 环境 中 方便 他 人 辨别 的 重要 标志 ， 因 此 一 定 要 取 好 。 

1. 昵称 要 素 

取 一 个 恰当 且 正 式 的 名 字 ， 会 让 客户 对 所 销售 的 对 象 有 一 个 更 加 直观 的 认识 。 所 以 在 命名 时 ， 我 
们 应 该 尽量 去 挑选 一 些 耳目 一 新 的 、 别 具 一 格 的 、 让 对 方 能 够 看 一 眼 就 留 下 深刻 的 印象 的 名 字 。 

总 结 一 下 ， 取 微 信 昵称 要 注意 3 个 要 素 : 简单 好 记 、 形 象 生动 和 唯一 特性 。 
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一 一 一 性 ， 点 ， 这 样 才 更 有 利于 品牌 的 宣传 和 推广 。 
。 首先 是 字母 不 宜 过 多 ， 不 然 在 向 对 方 报 微 信号 时 容易 造成 困扰 与 疑惑 ， 并 且 微 信号 中 最 好 可 
， 以 包含 手机 号 或 是 QQ 号 之 类 的 数字 号 码 ， 好 记 的 同时 也 方便 对 方 联系 。 需 要 注意 的 是 ， 微 信号 的 
， 设置 必须 以 英文 字母 作为 开头 ， 是 不 能 以 数字 作为 开头 的 。 | 
， 此 处 为 大 家 介绍 几 种 微 信号 设置 方式 ， 包 括 姓名 缩写 + 手机 号 码 、 姓 名 缩写 QQ 号 码 、 英 文 名 
”+ 手机 号 码 和 英文 名 +QQ 号 码 等 4 种 。 : 
， 如果 你 的 企业 有 大 量 客户 ， 并 且 同 时 有 多 个 微 信号 进行 操作 与 维护 ， 可 以 采取 企业 名 称 缩写 


微 信 昵 称 的 取 法 ， 这 里 给 大 家 总 结 常见 的 几 种 。 
一 是 真实 取 名 法 。 直 接 用 自己 的 姓名 ， 或 者 企业 名 称 来 命名 ， 如 图 6-6 所 示 。 
二 是 虚拟 取 名 法 。 可 以 选用 一 个 艺名 、 笔 名 、 网 名 等 ， 如 图 6-7 所 示 ， 但 切记 不 要 经 常 换 名 称 。 


图 6-6 真实 取 名 法 图 6-7 虚拟 取 名 法 
三 是 创意 取 名 法 。 如 同音 、 谐 音 等 手法 都 可 以 ， 如 有 个 昵称 叫 “ 淳 普 茶 楼 ”， 因 为 这 位 用 户 是 卖 
普洱 茶 的 ， 名 字 新 颖 而 且 也 包含 了 所 销售 的 商品 信息 ， 如 图 6-8 所 示 。 
四 是 组 合 取 名 法 。 中 文 名 + 英文 名 ， 或 者 企业 名 称 + 中 文 名 等 ， 如 图 6-9 所 示 ， 将 公司 名 称 和 自己 的 
名 称 、 职 位 等 ， 放 在 昵称 当中 ， 让 人 一 目 了 然 ， 不 仅 找 起 来 方便 ， 而 且 对 公司 的 印象 也 会 更 加 深刻 。 


国 : 志 
省 共 棋 
吧 = 
> 人 29 
下 汛 天 二 
图 6-8 创意 取 名 法 图 6-9 ”组合 取 名 法 


3. 符号 取 法 

设计 讲究 的 是 创新 和 独特 性 。 除 了 枯燥 的 中 文 和 英文 ， 我 们 还 可 以 往 昵称 中 加 入 可 爱 的 表情 ， 来 
传递 出 一 种 向 上 、 热 情 的 气质 ， 给 人 留 下 不 一 样 的 印象 。 

下 面 简单 介绍 一 下 在 昵称 中 加 入 表情 的 方法 。 

在 “个 人 信息 ”界面 ， 单 击 “ 昵 称 ”， 即 可 弹出 “更 改名 字 ” 界 面 ，@ 单 击 键 盘 中 的 笑脸 表情 按 


钮 ， 如 图 6-10 所 示 。 即 可 弹出 各 种 符号 列表 ， 大 家 可 以 先 @ 单 击 底部 的 符号 类 型 ， 再 在 列表 中 全 选择 
适合 自己 或 有 特色 的 符号 ， 如 图 6-11 所 示 。 

还 有 一 些 昵称 里 的 表情 可 以 直接 反映 出 商家 所 销售 的 商品 。 如 图 6-12 所 示 ， 如 果 将 口红 、 箱 包 、 
女装 、 女 鞋 、 帽 子 、 轻 奢 饰 品 等 表情 择 其 一 放 在 昵称 里 ， 可 以 让 顾客 一 眼 明白 你 所 销售 的 商品 ， 但 是 
切记 不 要 放 太 多 ， 否 则 会 让 人 分 不 清楚 你 所 销售 的 商品 。 


Ea 
级 we， ma ce 原 AE 
ln 5 5 全 四 四 这 有 训 上 和 业 
"| wo 四 So 人 dd 
ENF 多 六 向 针 人 OL 
oA 
°° | 一 | "| @ 0 an na 
图 6-10 “更 改名 字 ” 界 面 图 6-12 表情 符号 


4. 特殊 位 置 取 法 

这 里 介绍 一 种 独特 位 置 的 取 名 方法 ， 即 将 自己 的 电话 号 码 以 小 写 的 方式 ， 置 于 名 称 的 右上 方位 
置 ， 这 种 方法 一 般 的 人 不 会 哦 ， 这 里 分 享 给 大 家 。 

对 在 微 信 朋 友 圈 中 做 销售 的 商户 来 说 ， 让 对 方 能 够 轻易 且 迅 速 地 取得 自己 的 联系 方式 是 非常 重要 
的 。 有些 人 直接 将 电话 号 码 放 入 昵称 之 中 ， 但 是 这 样 可 能 会 导致 名 称 字数 过 长 ， 一 些 有 效 信息 被 掩盖 。 

这 个 时 候 ， 我 们 可 以 上 网 运用 一 种 叫 作 “ 上 标 电话 号 码 生成 器 ”的 程序 ， 来 解决 这 个 问题 。 接 下 
来 为 大 家 介绍 这 个 程序 的 具体 用 法 。 

9 STEP 01 打开 手机 百度 ， 人 @ 搜 索 “ 上 标 电话 号 码 生成 器 ”， 和 外 并 单 击 链接 打开 ， 如 图 6-13 所 示 ， 和 @ 将 


自己 的 号 码 输 入 ， 如 图 6-14 所 示 。 
写 上 S848] 和 搜索 | Fr 
全 部 由 下 
上 标 电话 号 码 生成 器 回音 击 | 上 标 电话 号 码 生成 器 
上 标 电 活 本 生成 流失 一 
a 必 机 并 关注 eS 
返回 五 字符 工具 和 
四 输入 | a 目 
© @ 8 3 
1 a wa 
4 5 6 PE 
小 字 生成 器 还 能 用 上 标 眠 称 1 
Soe -| 四 
村 入 28 次 拉 ls 
< “加 cc: 3: 0o 二 


图 6-13 单 击 链 接 图 6-14 输入 号 码 
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9 STEP 02 人 @ 单 击 “ 一 键 转换 ”按钮 ， 全 就 可 以 生成 像 链接 一 样 的 小 数字 ， 如 图 6-15 所 示 。 将 这 些 数 字 
全 复制 粘贴 在 自己 的 昵称 后 面 ， 这 样 既 美 观 又 方便 的 电话 号 码 上 标 便 做 好 了 ， 效 果 如 图 6-16 所 示 。 如 
果 要 取消 号 码 ， 直 接 在 昵称 后 删除 即 可 。 


四 sa|l: rr 
上 标 电话 号 码 生成 器 克 pa 
Be @ 生 成 = we | 可 
页 收藏 
17888888888 I 
OF 二 
四 去 情 
分设 于 
去 Q 目 
< 加 < : ~ 2 
图 6-15 生成 像 链接 一 样 的 小 数字 图 6-16 ”电话 上 标示 意图 


6.1.3 ”个 性 签名 字 字 干 金 


个 性 签名 是 向 对 方 展现 自己 性 格 、 能 力 、 实 力 等 最 直接 的 方式 。 因 此 ， 为 了 一 开始 就 给 客户 留 下 
一 个 好 印象 ， 我 们 应 该 重点 思考 如 何 写 好 个 性 签名 。 个 
取 什 么 样 的 个 性 签名 ， 取 决 于 我 们 的 目的 ， 是 想 在 对 方 或 


客户 心里 留 下 一 个 什么 印象 ， 或 达到 一 个 什么 目的 ， 然 后 再 提 四 
炼 展示 我 们 的 产品 、 特 征 或 成 就 ， 如 图 6-17 所 示 。 

一 般 来 说 ， 不 同 用 户 个 性 签名 的 设置 大 概 有 以 下 3 种 风格 。 i 
1. 个 人 风格 式 图 6-17 个 性 签名 的 内 容 


这 是 个 性 签名 中 最 常见 的 风格 。 选 择 此 种 风格 的 用 户 会 根据 自己 的 习惯 、 性 格 特征 、 喜 欢 的 好 词 好 句 
等 来 编写 个 性 签名 。 一 般 来 说 ， 微 信 的 普通 用 户 都 会 选择 这 种 风格 作为 自己 的 个 性 签名 ， 如 图 6-18 所 示 。 


| un 27m 田 生 和 = 

19ua mad 1 “三 二 ,志和 Es 
秦 越 对 空 的 美丽 #3D-EX 达 匣 奇 
23na 到 叶 小 而 43D .EX 党 


13m 国 db? 3 
陡峭 的 内 辟 晴 


图 6-18 个 人 风格 式 的 个 性 签名 
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2. 成 就 展示 式 

使 用 这 个 风格 个 性 签名 的 用 户 ， 一 般 都 会 带 有 一 定 的 营销 性 质 。 但 他 的 身份 很 少 会 是 直接 的 销售 
人 员 ， 作 为 服务 人 员 的 可 能 性 更 高 一 些 。 但 他 绝对 也 是 销售 与 宣 发 环节 不 可 或 缺 的 一 员 。 比 如 接 下 来 
介绍 的 两 位 朋友 ， 如 图 6-19 所 示 。 


DE 
2 羊 经 水 和 线 半 所 轩 让 护理 要 
昨天 点 今年 再 有 一 次 图 不 够 自 二 有些 机 构 真是 欠 抽 驮 思 是 能 风 
> 天 闵 天 林 帮 移 法 三 。 多 少 钱 啊 ， 为 这 么 点 儿 事 儿 中 
网 条 我 ， 可 笑 至 极 ， 对 曙 


二 人 天 
by 图 有 的 性 价 比 什么 的 我 还 : 
水 有 二 
图 6-19 成 就 展示 式 的 个 性 签名 

他 们 并 不 直接 对 外 销售 ， 也 就 是 说 ， 交 易 的 直接 过 程 他 们 并 没有 参与 ， 可 是 他 们 同样 也 提供 营销 
与 广告 宣传 ， 因 为 他 们 是 整个 销售 过 程 的 一 个 环节 。 

3. 产品 介绍 式 

这 种 方式 可 以 说 是 销售 人 员 最 常用 的 方式 。 它 采取 最 简单 粗暴 的 方式 告诉 对 方 他 的 营销 方向 与 内 
容 ， 如 图 6-20 所 示 。 


今天 


莱 客 末 茶 当 酒 , 云 山 云 去 
云 作 车 


素 资 传 静夜 ， 芳 气 满 用 轩 EH 
图 6-20 ”产品 介绍 式 的 个 性 签名 
这 种 直接 介绍 商品 的 个 性 签名 ， 选 择 的 都 是 店铺 里 的 明星 产品 ， 一 般 来 说 都 是 知名 度 比 较 高 的 


好 货 。 
在 添加 好 友 的 过 程 中 ， 个 性 签名 十 分 重要 ， 好 的 签名 能 给 对 方 留 下 深刻 的 印象 。 接 下 来 为 大 家 介 


绍 设 置 个 性 签名 的 步骤。 


国情 但 次 概 简 民 族 风 项， 
人 
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9 STEP 01 首先 进入 “我 ”界面 ，@ 单 击 “ 微 信号 ”按钮 ， 如 图 6-21 所 示 。@ 进 入 “个 人 信息 ”界面 之 
后 ，@ 单 击 “ 更 多 ”按钮 ， 如 图 6-22 所 示 。 


Q 十 总 四 进入 
.四 和 美和 当代 购 加 他 , 国 
忆 称 
医 全 
@ 单 主 条 信 号 
过 二 维 三 名片 
| 相册 更 多 【3) 单 击 
而 卡 包 
我 的 地 址 
四 表情 
OO i 
2 
图 6-21 单 击 “ 微 信号 ”按钮 图 6-22 单 击 “ 更 多 ”按钮 


9 STEP 02 @Q 进 入 “更 多 信息 ”界面 ，@ 单 击 “ 个 性 签名 ”按钮 ， 如 图 6-23 所 示 。 合 在 编辑 栏 中 输入 个 
性 签名 后 ，@ 单 击 “ 保 存 ”按钮 ， 如 图 6-24 所 示 ， 即 可 设 定 个 性 签名 。 


€ 信息 各 进入 


美美 轩 美 枚 代购 ， 给 您 一 份 真实 的 美丽 


四 单 击 
2 3 

ee) ec oer 到 

ed 


1 
prs uv wz 


Eo | 一 | sn BS 


图 6-23 ” 单 击 “个 性 签名 ”按钮 图 6-24 单 击 “保存 ”按钮 


6.1.4 ”主题 照片 展示 商业 价值 


从 位 置 展 示 的 出 场 顺序 来 看 ， 虽 说 头像 是 微 信 的 第 一 广告 位 不 假 ， 但 如 果 从 效果 展示 的 充分 度 而 
言 ， 主 题 图 片 的 广告 位 价值 更 大 ， 大 在 哪 ? 大 在 尺寸 ， 可 以 放大 图 和 更 多 的 文字 内 容 ， 更 全 面 充分 地 
展示 我 们 的 个 性 、 特 色 、 产 品 等 。 
微 信 的 主题 照片 其 实 是 头像 上 面 的 背景 封面 。 下 面 给 大 家 看 看 ， 做 得 比较 好 的 效果 案例 ， 如 
图 6-25 所 示 。 
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图 6-25 制作 精美 的 主题 照片 示意 图 
微 信 的 这 张 主题 照片 ， 尺 寸 比例 为 480 像 素 X300 像 素 左 右 ， 因 此 大 家 可 以 通过 “图 片 + 文字 ”的 方 
式 ， 村 于 和 自居 特色 、 成 就 等 ， 站 充分 展示 出 来 。 


大 家 可 以 自己 用 制图 软件 去 做 ， 也 可 以 去 淘宝 网 提 | sh 

二 过 5 索 “ 微 信 朋友 园 封 面 ”， 已 经 有 专门 做 广告 的 人 为 大 家 | 己 名 

， 量 身 定制 这 个 主题 广告 照片 了 。 | 合生 
。sTEP 01 更 主题 照片 的 方法 很 简单 ， 进 入 失信 ,人 @ 单 击 右 下 角 的 “发 en 

现 ” 图标， 再 @ 单 击 “ 朋 友 图” 按钮 ， 如 图 6-26 所 示 。 进 入 “朋友 轿 ” : 

界面 ，@@ 单 击 背 景 照片 ， 会 弹出 “更 换 相册 封面 ”按钮 ，@ 单 击 此 按 | 

钮 ， 如 图 6-27 所 示 。 4 a 人 
e STEP 02 @ 进 入 “更 换 相册 封面 ”界面 ， 人 @ 单 击 “ 从 手机 相册 选择 " 按 。 | 了 om 

钮 ， 如 图 6-28 所 示 。 选 择 一 张 合适 的 照片 ， 并 按 提示 操作 ，@@ 封 面 便 设 2 

置 完毕 ， 效 果 如 图 6-29 所 示 。 图 6-26 单 走 “朋友 图 ” 按钮 


从 手机 相册 选择 


拍 -性 


全 单 二 @ 单 二 


更 换 相册 封面 


@ 单 二 


图 6-27 单 击 “ 更 换 相册 封面 ”按钮 ”图 6-28 单 击 “从 手机 相册 选择 ”按钮 图 6-29 设置 完毕 效果 图 
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[到 和 案例 实战 : 微 信 朋 友 轿 广告 设计 


了 解 了 头像 、 上 昵称 、 个 性 签名 与 主题 照片 的 重要 性 之 后 ， 可 以 开始 试 着 设计 属于 自己 的 朋友 图 
了 。 设 计时 一 定 要 贴 合 自己 的 营销 方向 ， 否 则 会 变 得 不 伦 不 类 。 


6.2.1 名 人 版 朋友 圈 设 计 


在 制作 名 人 版 朋友 圈 界 面 时 ， 主 要 采用 白色 的 背景 ， 并 添加 华丽 的 装饰 素材 ， 文 字 对 称 分 布 ， 对 
比 非常 清晰 ， 可 以 很 好 地 突出 其 中 要 表达 的 信息 。 
本 实例 最 终 效果 如 图 6-30 所 示 。 
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图 6-30 ”实例 效果 


效果 文件 “| 效果 \ 第 6 章 \ 名 人 版 朋友 轿 设 计 .psd、 名 人 版 朋友 圈 设 计 jpg 


6.2.1 名 人 版 朋友 圈 设 计 .mp4 


9 STEP 01 单 击 “ 文 件 ”| “新建 ”命令 ，@ 弹 出 “新 建文 档 ” 对 话 框 ,全 设置 “名 称 ” 为 “名 人 版 朋友 
圈 设 计 ”、“ 宽 度 ” 为 1080 像 素 、“ 高 度 ” 为 810 像 素 、“ 分 辨 率 ”为 300 像 素 /英寸 、“ 颜 色 模式 ”为 
"RGB 颜色 ”、“ 背 景 内 容 ” 为 “白色 ”， 合 单 击 “ 创 建 ”按钮 ， 如 图 6-31 所 示 ， 新 建 一 个 空白 图 像 。 

9 STEP 02 打开 “头像 1jpg” 素 材 ， 将 其 拖 蝶 至 “名 人 版 朋友 圈 设 计 ” 图 像 编 辑 窗口 中 的 合适 位 置 ， 效 
果 如 图 6-32 所 示 。 

9 STEP 03 选取 工具 箱 中 的 椭圆 选 框 工具 ， 在 图 像 编辑 窗口 中 创建 一 个 正 圆 选区 ， 如 图 6-33 所 示 。 

9 STEP 04 单 击 “ 选 择 ”|“ 反 选 ”命令 ， 反 选 选区 ， 如 图 6-34 所 示 。 

e@STEP 05 按 Delete 键 ， 删 除 选区 内 的 图 像 ， 如 图 6-35 所 示 。 

9 STEP 06 按 Ctrl+D 组 合 键 ， 取 消 选 区 ， 如 图 6-36 所 示 。 
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“图 6.35 删除 选区 内 的 图 像 图 6-36 取消 选区 

9 STEP 07 按 Ctrl+T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 的 大 小 和 位 置 ， 并 按 Enter 键 确认 ， 如 
图 6-37 所 示 。 

e@STEP 08 双击 “图 层 1” 图 层 ， 人 @ 弹 出 “图 层 样 式 ”对 话 框 ， 合 选中 “ 描 边 ” 复 选 框 ， 全 设置 “大 
小 ”为 6、“ 位 置 ”为 “外 部 ”、“ 颜 色 ” 为 黑色 ( RGB 参数 值 均 为 0 ) ， 如 图 6-38 所 示 。 

Tow. 


是 | 


图 6-37 调整 图 像 的 大 小 和 位 置 图 6-38 设置 各 选项 
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9 STEP 09 单 击 “ 确 定 ” 按 钮 ， 即 可 应 用 “ 描 边 ” 图 层 样 式 ， 如 图 6-39 所 示 。 
9 STEP 10 打开 “花纹 1jpg” 素 材 ， 将 其 拖 折 至 背景 图 像 编 辑 窗口 中 合适 的 位 置 ， 效 果 如 图 6-40 所 示 。 


| 


拖 慢 


应 用 样式 


图 6-39 应 用 图 层 样式 图 6-40 拖 粤 图 像 
9 STEP 11 选取 工具 箱 中 的 魔 棒 工 具 ， 在 工具 属性 栏 中 设置 “ 容 差 ”为 20， 在 花纹 素材 的 灰色 区 域 上 单 
击 鼠 标 左 键 ， 创 建 选区 ， 如 图 6-41 所 示 。 
e@STEP 12 单 击 “ 选 择 ”| “选取 相似 ”命令 ， 增 加 选区 范围 ， 如 图 6-42 所 示 。 


汉 


图 6-41 创建 选区 图 6-42 ”增加 选区 范围 
9 STEP 13 按 Delete 键 ， 删 除 选 区 内 的 图 像 ， 按 Ctrl+D 组 合 键 ， 取 消 选区 ， 如 图 6-43 所 示 。 
9 STEP 14 按 住 Ctrl 键 的 同时 单 击 “ 图 层 2” 图 层 的 图 层 缩 览 图 ， 将 其 载 入 选区 ， 如 图 6-44 所 示 。 
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图 6-43 ”取消 选区 图 6-44 载 入 选区 
9 STEP 15 设置 前 景色 为 黑色 ( RGB 参 数值 均 为 0 ) ， 为 选区 填充 黑色 ， 并 取消 选区 ， 如 图 6-45 所 示 。 
e@STEP 16 适当 调整 花纹 图 像 的 位 置 ， 效 果 如 图 6-46 所 示 。 
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图 6-45 填充 颜色 后 取消 选区 图 6-46 调整 图 像 位 置 
9 STEP 17 打开 “花纹 2.psd” 素 材 图 像 ， 按 住 Ctql 键 的 同时 单 击 “ 图 层 0” 图 层 的 图 层 缩 览 图 ， 将 其 载 入 
选区 ， 如 图 6-47 所 示 。 
9 STEP 18 为 选区 填充 黑色 ， 并 取消 选区 ， 将 其 拖 拒 至 “名 人 版 朋友 圈 设 计 ” 图 像 编 辑 窗口 中 合适 的 位 
置 ， 效 果 如 图 6-48 所 示 。 


载 入 选区 
图 6-47 载 入 选区 图 6-48 拖 避 图像 


9 STEP 19 选取 工具 箱 中 的 横 排 文字 工具 ， 单 击 “ 窗 口 ”|“ 字 符 ” 命 令 ， 在 弹出 的 “字符 ”面板 中 ， 人 @ 设 
置 “字体 系列 ”为 “微软 雅 黑 ”、“ 字 体 大 小 ”为 10 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 7、“ 颜 色 ” 
为 黑色 ( RGB 参数 值 均 为 0 ) ， 外 并 激活 仿 粗 体 图 标 ， 如 图 6-49 所 示 。 

9 STEP 20 输入 相应 文本 ， 并 调整 至 合适 位 置 ， 效 果 如 图 6-50 所 示 。 


EE »| 琶 


宽 屠 引 末 “| Regier ~ 2 
这 1 点 ~ 过 自动 
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过 | 0% 
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手机 摄影 构图 大 全 公众 号 创始 人 


3 给 入 | 


图 6-49 设置 各 选项 图 6-50 输入 相应 文本 
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文字 是 多 数 设计 作品 尤其 是 商业 作品 中 不 可 或 缺 的 重要 元 素 ， 有 时 甚至 在 作 
品 中 起 着 主导 作用 。Photoshop 除 了 提供 丰富 的 文字 属性 设计 及 版 式 编排 功能 外 ， 


”还 色 许 对 文字 的 形 居 进 行 编辑 ， 以 人 制作 出 更 多 、 更 证 的 文字 效果 。 


@ STEP 21 选取 了 
3 像素 、“ 填 充 ” 为 黑色 ( RGB 参数 值 均 为 0 ) ， 绘 制 一 个 直线 形状 ， 如 图 6-51 所 示 。 


9 STEP 22 选取 工具 箱 中 的 横 排 文字 了 
“字体 大 小 ”为 7 点 、 


“设置 所 选 字 符 的 字 距 调整 ”为 7、 


激活 仿 粗 体 图 标 ， 在 适当 位 置 输入 相应 文本 ， 如 图 6-52 所 示 。 


[ 具 箱 中 的 直线 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 粗 细 ” 为 


[ 具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “ 华 康 海报 体 ”、 
“颜色 ”为 黑色 ( RGB 参 数值 均 为 0) ， 并 


绘制 
手机 摄影 构图 大 全 公众 号 创始 人 手机 摄影 构图 大 全 公众 号 创始 人 
关于 我 ， 你 也 能 成 为 二 下 大 俩 
= = 
图 6-51 绘制 直线 图 6-52 ”输入 相应 文本 
9 STEP 23 选取 工具 箱 中 的 横 排 文 字 工 具 ， 在 图 像 上 创建 一 个 文本 框 ， 设 置 “字体 系列 ”为 “微软 雅 
“设置 行距 ”为 11 点 、“ 设 置 所 选 字 符 的 字 距 调整 ”为 7、“ 颜 色 ” 为 


黑 ”、“ 字 体 大 小 ”为 6.5 点 、 
黑色 ( RGB 参数 值 均 为 0 ) ， 如 图 6-53 所 示 。 


9 STEP 24 在 图 像 编辑 窗口 中 的 适当 位 置 输入 相应 文本 ， 如 图 6-54 所 示 。 
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图 6-53 设置 各 选项 


图 6-54 输入 相应 文本 


9 STEP 25 复制 刚刚 输入 的 文字 ， 并 将 其 移 至 头像 的 右 侧 ， 如 图 6-55 所 示 。 


横 排 文字 工具 修改 文本 内 容 ， 效 果 如 图 6-56 所 示 。 


9 STEP 26 运 


9 STEP 27 单 击 “ 背 景 " 


图 层 右 侧 的 锁 图 标 ， 选 中 所 有 图 层 ， 按 Ctrl+G 组 合 键 ， 为 图 层 编组 ， 得 到 “组 


1” 图 层 组 ， 如 图 6-57 所 示 。 
9 STEP 28 按 CtrlO 组 合 键 ， 打 开 “ 朋 友 圈 界面 1psd” 素 材 图 像 ， 如 图 6-58 所 示 。 
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六 一 位 构图 专家 , 原 | 女 一 位 构图 专家 , 原 六 一 位 摄影 畅销 书 作 
创 300 多 篇 构图 文章 创 300 多 篇 构图 文章 创 300 多 篇 构图 文章 家 ,湖南 省 作家 协会 
， 提炼 500 多 种 构图 ,提炼 500 多 种 构图 提炼 500 多 种 构图 会 员 ， 多 家 出 版 社 签 
技法 技法 技法 约 作家 | 
手机 摄影 构图 大 全 公众 号 创始 人 手机 摄影 构图 大 全 公众 号 创始 人 修改 
关 斑 我 、 你 也 能 成 为 居 是 六 师 ! 关于 条， 你 也 能 成 为 恒 荆 大师 ! 
图 6-55 ”移动 文字 图 6-56 ”修改 文本 内 容 
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图 6-57 得 到 “组 1” 图 层 组 


图 


9 STEP 29 切换 至 背景 图 像 编 辑 窗口 ， 运 用 移动 工具 将 


窗口 中 ， 适 当 调 整 图 
eSTEP 30 在 “图 层 ” 
效果 如 图 6-60 所 示 。 


像 的 位 置 ， 如 图 6-59 所 示 。 


图 6-58 素材 图 像 


层 组 的 图 像 拖 皂 至 “朋友 圈 界 面 1 ”图像 编辑 


面板 中 ， 将 “组 1” 图 层 组 调整 至 “背景 ”图 层 上 方 ， 即 可 显示 被 隐藏 的 图 像 ， 


图 6-60 


调整 图 层 顺 序 
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6.2.2 简介 版 朋友 圈 设 计 


在 制作 简介 版 朋友 圈 界 面 时 ， 运 用 黑色 作为 背景 色 ， 白 色 作为 文字 与 装饰 的 颜色 ， 为 人 物 头 像 添 
加 白色 的 描 边 ， 使 头像 与 文字 相 呼 应 ， 让 整体 变 得 更 加 和 谐 。 
本 实例 最 终 效果 如 图 6-61 所 示 。 


图 6-61 实例 效果 


素材 \ 第 6 章 \ 头 像 2jpg、 朋 友 圈 界面 2.psd 


9 STEP 01 单 击 “文件 ” | “新建” 命令 ，@ 弹 出 “新 建文 档 ” 对 话 框 ， 全 设置“ 名 称 ” 为 “简介 版 朋友 
圈 设 计 ”、“ 宽 度 ” 为 1080 像 素 、“ 高 度 ” 为 810 像 素 、“ 分 辨 率 ” 为 300 像 素 /英寸 、“ 颜 色 模式 ”为 
家 GB 颜色 ”、“ 背 景 内 容 ” 为 “白色 ”， 傅 单 击 “ 创 建 ” 按 钮 ， 如 图 6-62 所 示 ， 新 建 一 个 空白 图 像 。 

9 STEP 02 设置 前 景色 为 黑色 ( RGB 参 数值 均 为 0) ， 并 为 “背景 ”图 层 填充 前 景色 ， 如 图 6-63 所 示 。 


[二 卫 


图 6-62 “新 建文 
© STEP 03 单 击 “ 文 件 ” | “打开” 命令， 打开 “头像 2jpg” 素 材 ， 和 i 
命令 ， 弹 出 “亮度 /对 比 度 ”对 话 框 ， 设 置 “ 对 比 度 ”为 20, 单 


“图 像 ”| Te 亮度 /对 比 度 ” 
“确定 ”按钮 ， 效 果 如 图 6-64 所 示 。 


[= 


eSTEP 04 单 击 


ea 


像 ”| “调整” 


和 度 ” 为 66、 
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“自然 饱和 度 ” 命 令 ， 弹出“ 


然 饱 和 度 ” 


“饱和 度 ” 为 6，@ 单 击 “ 确 定 ” 按 钮 ， 效 果 如 
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对 话 框 ，@ 设 置 “ 自 然 饱 


6-65 所 示 ， 即 可 调整 


像 的 自然 饱和 度 。 


图 6-65 


图 


图 6-67 


自然 饱和 度 : 在 颜色 接近 最 大 饱和 度 时 ， 最 大 限度 地 减少 修剪 ， 可 以 防止 图 


整 值 过 大 时 ， 可 能 会 造成 


像 的 大 小 和 位 置 ， 效 果 如 


[ 具 ， 按 住 Shif 键 的 同时 ， 在 人 物 的 头 部 按 住 鼠标 左 键 并 拖 皂 ， 创 


指点 ) “自然 饱和 度 ”对 话 框 的 各 主要 选项 含义 如 下 
像 过 度 饱 和 
> 饱和 度 : 用 于 调整 图 像 中 所 有 的 颜色 ， 而 不 考虑 当前 的 饱和 度 ， 调 
图 像 失真 
@ STEP 05 运用 移动 工具 将 素材 图 像 拖 鬼 至 背景 图 像 编辑 窗口 中 ， 适 当 调 整 
图 6-66 所 示 。 
9 STEP 06 选取 工具 箱 中 的 椭圆 选 框 了 
建 一 个 正 圆 选区 ， 如 图 6-67 所 示 。 
像 的 大 小 和 位 
e@ STEP 07 @Q 单 击 “ 图 层 ”面板 下 方 的 “添加 矢量 蒙 版 ”按钮 ,全 为 “ 
所 示 。 
9 STEP 08 执行 上 述 操作 后 ， 即 可 隐藏 部 分 图 像 ， 效 果 如 图 6-69 所 示 。 


9 STEP 09 按 住 Ctrl 键 的 同时 ， 单 击 “ 图 层 1” 图 层 的 
9 STEP 10 新 建 图 层 ， 单 击 “ 编 辑 ”|“ 描 边 ” 命 令 ， 
素 、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 合 选中 “ 居 外 ” 单 选 按 钮 ， 如 


层 蒙 版 ， 将 其 载 入 选 
人 @ 弹 出 “ 描 边 ”对 话 框 ，@ 设 置 “ 宽 度 ”为 6 像 


区 


， 如 


图 6-70 所 示 。 


6-71 所 示 。 
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描 边 : 在 “宽度 ”选项 区 中 可 以 设置 描 边 的 宽度 ; 单 击 “ 颜 色 ” 右 侧 的 色 


块 ， 可 以 在 打开 的 “失色 器 ”中 设置 描 边 的 颜色 


“ 居 外 ” 
复 选 框 ， 表 示 只 对 


> 位 置 可 以 设置 描 边 相 对 于 选区 边缘 ， 边 框 “ 内 部 ”“ 居 中 ”和 

> 混合 : 可 以 设置 描 边 颜色 的 混合 模式 与 不 透明 度 ; 选中 “保留 透明 区 域 
包含 像素 的 区 域 描 边 

> 保留 透明 区 域 : 如 果 选 中 了 此 项 ， 那么 所 操作 图 层 的 透明 部 分 就 会 被 保护 起 来 ， 描 边 不 会 覆 
盖 或 影响 到 透明 部 分 


OQ 弹出 [| 


,| 全 选中 


保留 适 明 区 域 (p 


图 6-70 可 图 6-71 设置 各 选项 
9 STEP 11 单 击 “ 确 定 ” 按 钮 ， 即 可 为 图 像 添 加 描 边 效 果 ， 如 图 6-72 所 示 。 
9 STEP 12 单 击 “选择 ”" |“ 取消 选择 ”命令 ， 即 可 取消 选区 ， 如 图 6-73 所 示 。 


在 “图 层 ” 面 板 中 新 建 一 个 图 层 ， 并 设置 前 景色 为 白色 ( RGB 参 数值 均 为 255 ) ， 如 图 6-74 


所 示 。 


选取 工具 箱 中 的 矩形 选 框 工具 ， 在 图 像 编辑 窗口 的 右 下 角 绘制 一 个 矩形 选区 ， 


失色 器 (前 曙 色 ) | 


如 图 6-75 所 示 。 


选取 工具 箱 中 的 多 边 形 套 索 工具 ， 在 工具 属性 栏 中 单 击 “ 添 加 到 选区 ”按钮 ， 在 图 像 编辑 窗 


口中 绘制 一 个 三 角形 ， 增 加 选区 范围 ， 如 图 6-76 所 示 。 


按 Alt+Delete 组 合 键 为 选区 填充 前 景色 ， 按 Ctrl+D 组 合 键 ， 取 消 选 区 ， 效 果 如 图 6-77 


所 示 。 


按 Ctrl+J 组 合 键 ， 复制“ 图 层 3” 图 层 ， 得 到 “图 层 3 拷贝 ”图 层 ， 单 击 “ 编 辑 |“ 变 


换 ”|“ 水 平 翻转 ”命令 ， 即 可 水 平 翻转 图 像 ， 如 图 6-78 所 示 。 


按 住 Shift 键 的 同时 ， 将 “图 层 3 拷贝 ”图 层 的 图 像 水 平移 动 至 图 像 编辑 窗口 
图 6-79 所 示 。 


的 左 侧 ， 效 果 如 
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9 STEP 19 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 ， 设 置 “ 字 体系 列 ”为 Elephant、“ 字 体 
大 小 ”为 15 点 、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 如 图 6-80 所 示 。 


9 STEP 20 在 图 像 编辑 窗口 中 输入 相应 文本 ， 并 运用 移动 工具 ， 将 文字 调整 至 合适 位 置 ， 效 果 如 图 6-81 
所 示 。 


Elephant 

如 55 点 

VAo PY EF QT 

后 APPLE STUDIO 
100% b 

钻 0 所 D> < 
TT 开工 于 


设置 
美国 英语 。 一“ 吕 | 平 有 


图 6-80 设置 各 选项 图 6-81 输入 相应 文本 


= “字符 ”面板 中 的 各 主要 选项 含义 如 下 
HY/ > 设置 字体 系列 : 在 该 选项 列表 框 中 可 以 选择 字体 。 
> 设置 字体 大 小 : 可 以 选择 字体 的 大 小 。 
设置 行距 : 行距 是 指 文 本 中 各 个 文字 行 之 间 的 垂直 间距 ， 同 一 段落 的 行 与 行 之 间 可 以 设置 不 
同 的 行距 ， 但 文字 行 中 的 最 大 行距 决定 了 该 行 的 行距 
> 设置 两 个 字符 间 的 字 距 微调 : 用 来 调整 两 字符 之 间 的 间距 ， 在 操作 时 首先 在 要 调整 的 两 个 字 
符 之 间 单 击 ， 设 置 插入 点 ， 然 后 再 调整 数值 。 
> 设置 所 选 字符 的 字 距 调整 : 选择 了 部 分 字符 时 ， 可 以 调整 所 选 字符 间距 ， 没 有 调整 字符 时 ， 
可 调整 所 有 字符 的 间距 。 
> 水 平 缩放 /垂直 缩放 : 水 平 缩放 用 于 调整 字符 的 宽度 ， 垂 直 缩 放 用 于 调整 字符 的 高 度 ， 这 两 个 
百分比 相同 时 ， 可 以 进行 等 比 缩放 ; 不 同时 ， 则 不 能 等 比 缩放 。 
> 设置 基线 偏 移 : 用 来 控制 文字 与 基线 的 距离 ， 它 可 以 升 高 或 降低 所 选 文字 。 
> 颜色 : 单 击 颜 色 块 ， 可 以 在 打开 的 “ 拾 色 器 ”对 话 框 中 设置 文字 的 颜色 。 
> T 状 按钮 : T 状 按钮 用 来 创建 仿 粗 体 、 和 斜体 等 文字 样式 ， 以 及 为 字符 添加 下 划 线 或 删除 线 。 
> 语言 : 可 以 对 所 选 字符 进行 有 关连 字符 和 拼写 规则 的 语言 设置 ，Photoshop 使 用 语言 词典 检查 
连 字符 连接 。 
e@STEP 21 选取 工具 箱 中 的 横 排 文字 工具 ， 设 置 “ 字 体系 列 ”为 “方正 粗 圆 简体 ”、“ 字 体 大 小 ”为 8 
点 、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 在 图 像 编辑 窗口 中 的 适当 位 置 输入 相应 文本 ， 如 图 6-82 
所 示 。 
9 STEP 22 选取 工具 箱 中 的 直线 工具 ， 在 工具 属性 栏 中 设置 “粗细 ”为 4 像素 、“ 填 充 ” 为 白色 ( RGB 
参数 值 均 为 255 ) ， 绘 制 一 个 直线 形状 ， 如 图 6-83 所 示 。 
9 STEP 23 选取 工具 箱 中 的 横 排 文 字 工具 ， 在 “字符 ”面板 中 加 设置 “字体 系列 ”为 “黑体 ”、“ 字 体 
大 小 ”为 6 点 、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 全 并 激活 仿 粗 体 图 标 ， 如 图 6-84 所 示 。 
9 STEP 24 展开 “段落 ”面板 ， 单 击 “ 右 对 齐 ” 按 钮 ， 如 图 6-85 所 示 。 
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9 STEP 25 在 图 像 编辑 窗口 中 输入 文字 ， 并 适当 调整 文字 的 
9 STEP 26 再 次 输入 一 段 文 字 ， 在 “段落 ”面板 中 ， 单 和 


果 如 图 6-87 所 示 。 


图 6-84 设 


Ht 
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9 STEP 27 单 击 背景 图 层 右 侧 的 锁 图 标 ， 选 中 所 有 图 层 ， 按 Ctrl+G 组 合 键 ， 为 图 层 编组 ， 得 到 “组 1” 图 


层 组 ， 如 图 6-88 所 示 。 


单 击 “ 右 对 齐 ” 按 钮 
位 置 ， 如 图 6-86 所 示 。 
左 对 齐 ” 按 钮 ， 并 适当 调整 文字 的 位 置 ， 效 
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.on 昔 果 设计 淹 宝 直 和 党 外 


有 |。 半 果 计 工 作 审 首席 设计 了 


@ STEP 28 按 Ctrl+O 组 合 键 ， 打 开 “ 朋 友 圈 界面 2psd” 素 材 


像 ， 如 图 6-89 所 示 。 


出 


9 STEP 29 切换 至 背景 图 像 编辑 窗 口 ， 运 用 移动 工具 将 图 层 组 的 图 像 拖 投 至 “朋友 圈 界 面 2” 图 像 编 辑 


EE 


中 ， 适 当 调 整 图 像 的 位 置 ， 如 图 6-90 所 示 。 


9 STEP 30 在 “图 层 ” 面 板 中 ， 将 “组 1” 图 层 组 调整 至 “背景 ”图 层 上 方 ， 即 可 显示 被 隐藏 的 图 像 ， 


效果 如 图 6-91 所 示 。 
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6.2.3 ” 店 招 版 朋友 圈 设 计 


在 制作 店 招 版 朋友 圈 界 面 时 ， 运 用 深沉 的 蓝 色 渐变 作为 背景 色 ， 并 添加 华贵 的 暗 纹 ， 且 店 招 采用 
欧式 边框 ， 使 整体 显得 低调 奢华 。 
本 实例 最 终 效果 如 图 6-92 所 示 。 


今天 


仇 玫 | 巨 补水 1 深度 保有 
洁面 和 装 


A 仇 玉 | 者 槛 补水 保 加 关 科 
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图 6-92 实例; 


素材 \ 第 6 章 \ 花 纹 3.jpg、 边 框 .psd、 朋 友 圈 界面 3.psd 
效果 \ 第 6 章 \ 店 招 版 朋友 圈 设 计 .psd、 店 招 版 朋友 圈 设 计 .jpg 
6.2.3 店 招 版 朋友 圈 设 计 .mp4 


e@STEP 01 单 击 “ 文 件 ”|“ 新 建 ” 命 令 ，@ 弹 出 “新 建文 档 ” 对 话 框 ， 全 设置“ 名称 ”为 “ 店 招 版 朋友 
圈 设 计 ”、“ 宽 度 ”为 1080 像 素 、“ 高 度 ” 为 810 像 素 、“ 分 辨 率 ” 为 300 像 素 / 英 寸 、“ 颜 色 模式 ”为 

“RGB 颜色 ”、“ 背 景 内 容 ” 为 “白色 ”， 和 外 单 击 “ 创 建 ” 按 钮 ， 如 图 6-93 所 示 ， 新 建 一 个 空白 图 像 。 
9 STEP 02 按 Shift+CtrLHN 组 合 键 ， 弹 出 “新 建 图 层 ” 对 话 框 ， 如 图 6-94 所 示 。 
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名 称 (N): 


”人 加 # 吉 
[emp *: 


使 用 前 一 图 层 创建 前 贴 莹 版 (P) 


颜色 (Cj 四 无 
模式 : 正常 不 透明 度 (0): 100 


图 6-93 设置 各 选项 图 6-94 “新 建 图 层 ” 对 话 框 


Eo】 在 photoshop 中 新 建 图 层 的 方式 有 很多 ， 以 下 列举 了 两 种 常用 的 方法 。 
| 专家 指点 ， > 庆生， 单 击 “ 图 层 " 面板 下 方 的 “创建 新 图 层 ” 按钮， 即 可 新 建 图 层 。 
> 命令 : 单 击 “ 图 层 " | “新建 ”| “图 层 ” 命 令 ， 强 出 “新 建 图 层 ” 对 话 框 ， 单 击 “ 确 定 ” 按 乌 ， 


9 STEP 04 选取 工具 箱 中 的 渐变 工具 ， 单 击 工具 属性 栏 中 的 “点 按 可 编辑 渐变 ”按钮 ， 弹 出 “渐变 编辑 
器 ”对 话 框 ， 选 择 渐变 条 左 侧 的 色 标 ， 单 击 “ 颜 色 ” 右 侧 的 色 块 ， 弹 出 “ 拾 色 器 ( 色 标 颜色 ) ”对 话 
框 ， 设 置 RGB 参 数值 分 别 为 7、99、226， 如 图 6-96 所 示 。 


x 
图 层 各 
P 扣 vv 四 OOTDBD 
正常 ~ 不 透明 度 : 100% | ~ 


铀 :图 w 沙 癸 人 填充 : 100% ~ 
“ 四 怀 
© LE 

新 建 


只 有 Web 而 色 


区 fx o @. [= 
图 6-95 新建“ 图 层 1” 图 层 图 6-96 设置 色 标 颜色 

9 STEP 05 @ 设 置 第 一 个 色 标的 “位 置 ”为 8%， 并 用 与 上 同样 的 方法 @ 设 置 男 一 个 色 标 的 颜色 为 深蓝 
色 ( RGB 参 数值 分 别 为 39、79、132 ) ， 如 图 6-97 所 示 。 

9 STEP 06 单 击 “ 确 定 ” 按 钮 ， 返 回 图 像 编 辑 窗口 ， 单 击 工具 属性 栏 中 的 “ 径 向 渐变 ”按钮 ， 将 鼠标 指 
针 移动 至 图 像 编 辑 窗口 的 中 心 位 置 ， 按 住 鼠 标 左 键 并 向 左下 角 拖 昕 ， 释 放 鼠 标 左 键 ， 即 可 填充 渐变 颜 
色 ， 效 果 如 图 6-98 所 示 。 

9 STEP 07 按 Ctrl+O 组 合 键 ， 打开“ 花纹 3.jpg” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 拓 至 背景 图 像 编 
辑 窗口 中 的 适当 位 置 ， 效 果 如 图 6-99 所 示 。 

9 STEP 08 设置 “图 层 2” 图 层 的 “混合 模式 ”为 “正片 又 底 ”、“ 不 透明 度 ” 为 73%， 效 果 如 图 6-100 所 示 。 
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图 6-98 填充 渐变 颜色 


图 6-99 拖 昌 图 像 图 6-100 图 像 效果 
9 STEP 09 按 Ctrl+O 组 合 键 ， 打 开 “ 边 框 .psd” 素 材 图 像 ， 如 图 6-101 所 示 。 


9 STEP 10 选取 工具 箱 中 的 魔 棒 工具 ， 在 工具 属性 栏 中 设置 “ 容 差 ” 为 10， 在 图 像 编 辑 窗口 中 适当 的 位 
置 单 击 鼠 标 左 键 ， 创 建 选区 ， 如 图 6-102 所 示 。 


J 


图 6-101 素材 图 像 图 6-102 创建 选区 


9 STEP 11 选取 工具 箱 中 的 渐变 工具 ， 在 “渐变 编辑 器 ”对 话 框 中 ，@ 设 置 蓝 色 ( RGB 参数 值 分 别 为 


55、145、255 ) 到 蓝 灰 色 ( RGB 参 数值 分 别 为 53、114、189 ) 的 渐变 色 ，@@ 单 击 “ 确 定 ”按钮 ， 如 
图 6-103 所 示 。 


9 STEP 12 为 选区 填充 径 向 渐变 色 ， 并 取消 选区 ， 效 果 如 图 6-104 所 示 。 


9 STEP 13 运用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 6-105 
所 示 。 


9 STEP 14 选取 工具 箱 中 的 横 排 文 字 工 具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 粗 宋 简体 ”、 
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“字体 大 小 ”为 20 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 300、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 为 
255 ) ， 并 激活 仿 粗 体 图 标 ， 在 图 像 编辑 窗口 中 输入 文字 ， 如 图 6-106 所 示 。 


有 称 (N): 自 定 
潭 灾 类 型 : 实 认 “ 
再 请 属 Mj: 100 > 听 


位 置 (0: [E ]% | 济 除 (D) 


ne 


图 6-103 设置 渐变 色 图 6-104 填充 并 取消 选区 


图 6-105 ” 拖 慢 图 像 图 6-106 输入 文字 


| 过 家 指点 式 。 复 制 和 粘贴 图 层 样式 可 以 将 当前 图 层 的 样式 效果 完全 复制 于 其 他 图 层 上 ， 在 工 
， 作 过 程 中 可 以 节省 大 量 操作 时 间 。 首 先 选择 包含 要 复制 的 图 层 样式 的 源 图 层 ， 在 该 图 层 的 图 层 名 
， 称 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 ， 选 择 “ 持 贝 图 层 样式 ” 命 令 ， 选 择 要 粘贴 图 层 样式 的 
”图 层 ， 它 可 以 是 单个 图 层 也 可 以 是 多 个 图 层 ， 在 图 层 名 称 上 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “ 粘 
”贴图 层 样式 ”命令 即 可 。 


6 STEP 15 双击 文字 图 层 ， 弹 出 “图 层 样式 ” 对 活 杠 ， 选 中 “ 洁 变 下 加 ” 复 光 框 ， 设置 暗 黄 (RGB 参 数值 
分 别 为 207、147、2 ) 、 浅 黄 ( RGB 参 数值 分 别 为 252、235、201 ) 、 暗 黄 的 渐变 ， 如 图 6-107 所 示 。 


”常用 的 添加 “图 层 样式 ”的 方法 有 以 下 3 种 。 : 
ED . 命令 : 单 击 “ 图 层 " |“ 图 层 样式 ”命令 ， 在 弹出 的 下 拉 菜单 中 ， 选 择 任意 一 个 效 
果 命令 ， 即 可 打开 “图 层 样式 ”对 话 框 ， 并 进入 到 相应 效果 的 设置 面板 。 | 
”> “添加 图 层 样 式 ”按钮 : 在 “图 层 ” 面 板 下 方 单 击 “ 添 加 图 层 样 式 ”按钮 ， 在 弹出 的 菜单 中 选择 
任意 一 个 效果 命令 ， 即 可 打开 “图 层 样式 ”对 话 框 ， 并 进入 到 相应 效果 的 设置 面板 。 : 
' > 双击 鼠标 左 键 : 选中 要 添加 图 层 样式 的 图 层 并 双击 ， 即 可 打开 “图 层 样式 ”对 话 框 ， 在 对 话 框 ， 
; 左 侧 选中 相应 复 选 框 ， 就 能 切换 至 该 效果 的 设置 面板 。 : 
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9 STEP 16 选中 “投影 ” 复 选 框 ， 设 置 “不 透明 度 ”为 72%、 “距离 ”为 7 像素 、“ 扩 展 ” 为 0、“ 大 
小 ”为 9 像素 ， 单 击 “ 确 定 ”按钮 ， 即 可 为 文字 添加 相应 的 图 层 样 式 ， 如 图 6-108 所 示 。 


图 6-107 设置 渐变 色 图 6-108 添加 图 层 样式 
9 STEP 17 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 粗 宋 简 
体 ”、“ 字 体 大 小 ”为 8 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 200、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 为 
255 ) ， 在 图 像 编辑 窗口 中 输入 文字 ， 如 图 6-109 所 示 。 
9 STEP 18 拷贝 “ 伊 丽 莎 ”文字 图 层 的 图 层 样式 ， 并 粘贴 在 刚刚 输入 的 文字 图 层 上 ， 效 果 如 图 6-110 
所 示 。 


YILISHA 


A | 输入 ”区 和 ' 和 vel! 粘贴 样式 hy a 


图 6-109 输入 文字 图 6-110 ”粘贴 图 层 样 式 
9 STEP 19 复制 YILISHA 文 字 图 层 ， 运 用 移动 工具 将 其 移动 至 合适 位 置 ， 如 图 6-111 所 示 。 
9 STEP 20 选取 工具 箱 中 的 横 排 文字 工具 ， 修 改 文 本 内 容 ， 效 果 如 图 6-112 所 示 。 


图 6-111 移动 图 像 图 6-112 修改 文本 内 容 


第 6 章 ， 微 信 朋 友 圈 广告 设计 


9 STEP 21 选中 除 “背景 ”图 层 外 的 所 有 图 层 ， 按 Ctrl+G 组 合 键 ， 为 图 层 编组 ， 得 到 “组 1” 图 层 组 ， 


如 图 6-113 所 示 。 
9 STEP 22 按 Ctrl+O 组 合 键 ， 打 开 “ 朋 友 圈 界面 3.psd” 素 材 图 像 ， 如 图 6-114 所 示 。 
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Er 


刀口 8B 口 晶 全 pb 
图 6-113 得 到 “组 1” 图 层 组 图 6-114 素材 图 像 
9 STEP 23 切换 至 背景 图 像 编辑 窗口 ， 运 用 移动 工具 将 图 层 组 的 图 像 拖 抱 至 “朋友 圈 界 面 39” 图 像 编辑 


窗口 中 ， 适 当 调整 图 像 的 位 置 ， 如 图 6-115 所 示 。 
9 STEP 24 在 “图 层 ”面板 中 ， 将 “组 1” 图 层 组 调整 至 “背景 ”图 层 上 方 ， 效 果 如 图 6-116 所 示 。 


今天 显示 


[5 
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图 6-115 ” 拖 名 图 像 图 6-116 调整 图 层 顺 序 


仇 耐 东 | 条 夏 补 水 保 渴 注 简 
要 类 


伴随 着 徽 信 的 火热 发 展 ， 使 得 微 信 公众 平台 也 相应 诞生 。 越 来 越 多 的 商 
家 、 企 业 、 个 人 都 申请 开通 微 信 公众 平台 ， 用 于 营销 或 者 其 他 用 途 。 因 此 ， 微 
信 公众 号 的 界面 设计 也 变 得 重要 起 来 ， 美 观 的 界面 可 以 让 人 在 界面 停留 更 久 。 


设计 一 个 有 特色 的 公众 号 头像 
在 页 面 模板 中 设计 好 文章 封面 


文章 开头 或 结尾 增加 关注 类 图 片 做 宣传 


网 红 爆 款 手链 ! 只 要 5 种 材料 ~ 
就 可 以 轻松 做 出 来 ! 
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人 六 RS 二 


ET 


大 家 好 ,我 是 十 九 ~ 


废话 不 多 说 ， 先 上 成 品 图 ~ 


横幅 广告 Banner 设 计 
公众 号 封面 设计 
公众 号 求 关注 设计 
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干货 分 享 。 ”好 书 推荐 。 ”教程 模板 


向 四 前 期 准备 : 微 信 公众 号 设计 要 点 


近年 来 微 信 公众 平台 变 得 越 来 越 火 热 。 借 助 这 个 平台 ， 个 人 和 企业 、 机 构 都 可 以 打造 属于 自己 的 
微 信 公 众 号 。 这 一 章 主 要 介绍 设计 微 信 公 众 号 的 要 点 知识 ， 让 大 家 能 根据 自己 的 亮点 优势 ， 设 计 出 属 
于 自己 的 独特 公众 号 界面 。 


7.11 设计 一 个 有 特色 的 公众 号 头像 


说 起 各 类 新 媒体 运营 的 头像 ， 那 是 非常 重要 的 一 个 标志 。 一 张 优秀 、 吸 眼球 的 头像 图 片 能 够 胜 
过 千言 万 语 ， 它 能 给 读者 带 来 视觉 上 的 冲击 ， 达 到 文字 所 不 能 实现 的 效果 。 例 如 ， 创 业 邦 微 信 公 众 平 
台 ， 用 的 头像 是 “创业 邦 文字 + 英文 字母 ”的 设计 字样 ， 相 关 的 小 程序 头像 也 是 如 此 ， 让 读者 、 粉 丝 
一 眼 就 能 在 众多 微 信 公众 号 中 扫 到 它 ， 如 图 7-1 所 示 。 


©@ 创业 站 
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近 场 服务 


经 营 范 转 EE 全 


图 7-1 创业 邦 头像 
而 且 ， 如 果 用 户 在 网 上 搜索 创业 邦 的 官网 (www-.cyzone.cn) 的 话 ， 也 可 以 看 到 其 官方 账号 的 头 
像 ， 也 是 同样 的 “创业 邦 文字 + 英文 字母 ”的 模式 ， 如 图 7-2 所 示 。 


创业 邦 初创 公司 。 创 投 库 。 ” 旦 际 学 院 。 创业 盖 化 。 ”活动 
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对 两 高 管 强制 执行 


图 7-2 创业 邦 的 官网 界面 
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可 见 设计 好 一 个 吸 睛 的 头像 ， 对 一 个 新 媒体 企业 来 说 有 多 么 重要 。 它 将 出 现在 企业 策划 的 各 类 平 
台中 ， 并 且 长 期 跟随 企业 的 发 展 ， 成 为 企业 的 一 部 分 ， 为 企业 的 品牌 发 展 贡献 出 非常 重要 的 作用 。 

下 面 以 微 信 公众 平台 为 例 为 大 家 介绍 头像 设计 的 作用 和 设置 的 技巧 。 

1. 头像 设计 的 作用 

头像 设计 的 作用 ， 除 了 能 够 吸引 众 读者 、 众 粉丝 的 眼球 之 外 ， 还 有 一 个 作用 就 是 通过 设计 尽 可 能 
为 企业 微 信 公 众 平台 引入 更 多 人 流 ， 也 就 是 有 传播 性 。 

无 论 是 自 媒体 人 还 是 新 媒体 企业 ， 都 必须 要 重视 微 信 公众 号 的 头像 的 设计 。 那 么 ， 什 么 样 的 头像 
能 帮助 企业 吸引 到 更 多 读者 粉丝 呢 ? 就 笔者 看 来 ， 好 的 头像 通常 具备 3 个 特点 : 一 是 适合 公众 平台 ; 
二 是 图 像 清晰 ， 三 是 辨识 度 高 。 

什么 是 合适 的 头像 ? 合适 的 头像 就 是 符合 企业 公众 号 主打 的 风格 和 主题 的 。 

例如 ，“ 有 书 ” 的 微 信 公 众 平台 ， 它 专门 为 那些 有 读书 意愿 但 不 知道 读 什么 书 、 行 动力 和 自制 
力 较 弱 的 人 群 打造 的 一 个 公众 号 ， 目 的 是 让 更 多 人 重新 找到 读书 的 乐趣 。 因 此 ，“ 有 书 ” 的 微 信 公 众 
平台 的 头像 设计 ， 也 偏向 于 简洁 唯美 化 ， 以 清新 柔和 的 绿色 背景 衬托 白色 的 文字 一 一 “有 书 ”。“ 有 
书 ” 两 个 文字 进行 了 适当 的 变形 处 理 ， 使 两 个 文字 看 起 来 像 一 个 书架 ， 瞬 间 就 有 将 头像 提升 了 一 个 档 
次 的 感觉 。 如 图 7-3 所 示 为 有 书 微 信 公 众 平台 和 头像 ， 大 家 可 以 一 起 来 欣赏 一 下 。 


图 7-3 有 书 微 信 公众 平台 和 头像 
头像 清晰 ， 顾 名 思 义 ， 就 是 头像 的 像素 要 高 ， 因 为 在 微 信 上 ， 用 户 无 论 是 搜索 还 是 在 “订阅 号 ” 
中 ， 首 先 看 到 的 都 是 小 小 的 四 方形 或 者 圆 形 头像 ， 如 图 7-4 所 示 。 
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图 7-4 头像 以 小 图 形式 展现 


因此 ， 越 是 高 清 的 
二 大 要 求 。 


头像 辨识 度 高 ， 以 笔者 看 来 ， 其 实 非常 好 理解 。 举 例 来 说 ， 
两 个 V 组 成 的 Z 字 ，Z 可 以 让 人 一 1 


就 非常 有 辨识 度 ， 它 的 头像 最 吸引 人 的 点 在 于 ， 头 像 是 
它 的 公众 号 名 称 一 一 “站 长 之 家 ” 


F 台 的 头像 ， 大 家 一 起 来 欣赏 一 下 。 


如 图 7-5 所 示 就 是 站 长 之 家 的 微 信 公众 平台 和 微 信 公众 了 


二 | 


图 7-5 ”站 长 之 家 的 微 信 公众 平台 和 头像 


2. 头像 设置 的 技巧 


片 ， 在 小 图 形式 的 时 候 ， 越 容易 被 一 眼 扫 到 ， 所 以 清晰 头像 是 头像 设计 的 第 


“站 长 之 家 ”的 微 信 公 众 平台 的 头像 
下 就 联想 到 


在 介绍 完 头像 设计 的 作用 之 后 ， 接 下 来 为 大 家 介绍 一 下 头像 设置 的 技巧 。 设 置 公 众 号 头像 时 可 以 


考虑 使 用 3 种 图 片 ， 包 括 企 业 LOGO 图 片 、 企 业 产 品 图 片 和 
1) 企业 LOGO 图 片 


其 他 类 型 图 片 。 


对 企业 微 信 公 众 号 来 说 ， 选 择 使 用 自己 企业 的 LOGO 公 众 号 头像 的 图 片 是 一 个 很 不 错 的 选择 。 这 


样 能 够 让 读者 每 次 看 
于 企业 的 传播 度 是 很 有 好 处 的 。 
如 图 7-6 所 示 是 以 企业 LOGO 图 片 做 头像 的 公 
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图 7-6 ”以 企业 LOGO 图 片 做 头像 的 公众 号 


2) 企业 产品 图 片 


见 公众 号 的 时 候 就 能 够 看 见 企业 的 LOGO， 能 够 加 深 企 业 在 读者 心中 的 印象 ， 对 


除了 可 以 使 


赔 


企业 的 LOGO 做 微 信 公众 号 的 头像 之 外 ， 还 可 以 选择 采 
片 来 做 微 信 公 众 号 的 头像 。 使 用 产品 图 片 做 公众 号 头像 可 以 使 得 产品 能 更 多 次 数 地 


口角 


企业 或 者 个 人 经 营 的 产品 
H 现 在 广大 微 信 
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户 的 眼中 ， 增 加 了 产品 的 曝光 率 ， 从 而 达到 宣传 、 推 广 产 品 的 效果 。 如 图 7-7 所 示 是 以 企业 产品 图 片 
做 头像 的 公众 号 。 
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图 7-7 ”以 企业 产品 图 片 做 头像 的 公众 号 


3) 其 他 类 型 图 片 

对 于 那些 自 媒体 人 的 微 信 公 众 号 来 说 ， 他 们 可 能 没有 自己 的 公司 LOGO， 也 没有 自己 经 营 的 产 

品 。 对 于 这 些 人 在 设置 自己 公众 号 头像 的 时 候 就 选择 其 他 类 型 的 图 片 ， 如 自己 的 照片 、 各 种 跟 公众 号 
有 关联 的 照片 ， 等 等 。 如 图 7-8 所 示 就 是 以 其 他 类 型 的 图 片 作为 头像 的 公众 号 。 
EE [en 
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图 7-8 以 其 他 类 型 的 图 片 做 头像 的 公众 号 


| 在 选择 其 他 类 型 的 图 片 做 头像 时 ， 可 以 适当 给 自己 的 图 片 “ 化 妆 ”， 可 以 让 原 
一 一 一 > 本 单调 的 图 片 ， 通 过 多 种 方式 变 得 更 加 鲜 活 起 来 。 编 辑 要 给 图 片 “ 化 妆 ” 可 以 通过 : 
， 两 个 方法 着 手 进行 ， 一 是 在 图 片 拍摄 时 “化 妆 ”， 也 就 是 注意 好 拍照 技巧 的 运营 ， 以 及 拍摄 场地 
， 布 局 、 照 片 比例 布局 等 ; 二 是 后 期 “化 妆 ”， 图 片 后 期 的 软件 有 很 多 ， 如 强大 的 PS、 众 所 周知 的 
: 美 图 秀 秀 等 ， 微 信 公 众 号 文章 编辑 可 以 根据 自己 的 实际 技能 水 平 选择 图 片 后 期 软件 ， 通 过 软件 让 : 
i 图 片 变 得 更 加 夺 人 眼球 。 i 


7.1.2 在 页 面 模板 中 设计 好 文章 封面 


封面 是 文章 正文 非常 重要 的 一 部 分 。 一 个 精美 的 封面 ， 能 够 给 平台 带 来 的 阅读 量 是 不 可 估量 的 。 
图 片 能 够 给 文字 插 上 飞翔 的 翅膀 ， 让 文字 所 要 传达 的 情感 更 加 深入 人 心 。 运 用 得 当 的 图 片 能 够 成 为 微 
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信 公 众 号 打动 读者 的 强力 武器 。 

对 于 封面 图 片 的 尺寸 大 小 ， 平 台 给 出 的 建议 是 : 如 果 是 小 图 片 ， 尺 寸 为 200 像 素 X200 像 素 。 笔 者 
给 出 的 建议 则 是 900 像 素 X500 像 素 ， 有 时 候 ， 图 片 尺寸 过 大 或 者 过 小 ， 很 容易 造成 图 片 被 压缩 变形 ， 
样 出 来 的 效果 就 会 大 打折 扣 了 。 

而 且 在 选择 时 需要 清楚 的 是 ， 图 片 格式 的 选择 是 多 样 的 ， 包 括 png、jpg、gif、tiff 等 。 不 同 格式 的 


图 片 会 有 一 些 细微 的 差别 。 如 图 7-9 所 示 ， 是 手机 摄影 构图 大 全 的 公众 号 文章 封面 。 该 公众 号 以 摄影 构 
图 为 主 ， 图 片 都 非常 精美 ， 很 容易 吸引 用 户 的 注意 力 。 不 过 图 片 最 好 是 原创 的 ， 这 样 就 不 会 涉及 侵权 
问题 。 运 营 人 员 最 好 能 够 熟练 地 操作 PS 软文 ， 这 样 就 可 以 自己 设计 图 片 了 。 
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图 7-9 公众 号 文章 封面 


同时 ， 公 众 号 文章 编辑 可 以 根据 公众 号 定位 的 读者 的 阅读 时 间 的 相关 情况 而 对 
| 二 家 指点 E 图 片 的 大 小 做 调整。 : 
”之 所 以 说 要 选择 合适 的 图 片 大 小 ， 就 是 从 注重 读者 阅读 体验 出 发 的 ， 不 想 让 过 大 的 图 片 耗费 
”读者 大 量 流量 的 同时 还 要 耗费 图 片 加 载 的 时 间 。 如 果 公众 号 定位 的 读者 一 般 习惯 在 晚上 8、9 点 阅 
” 读 文章 ， 而 这 个 时 间 段 基本 上 人 们 都 是 待 在 家 里 ， 读 者 可 以 使 用 WiFi 打 开 公众 号 进行 阅读 ,不 用 
， 担心 读者 的 流量 耗费 也 不 用 担心 图 片 加 载 过 慢 ， 那 么 文章 编辑 就 可 以 适当 地 将 图 片 的 容量 放大 一 

给 读者 提供 最 清晰 的 图 片 ， 让 读者 拥有 最 好 的 阅读 体验 。 : 
”但 是 如 果 读 者 公众 号 定位 的 读者 大 部 分 都 是 在 早上 7、8 点 阅读 文章 ， 那 么 读者 使 用 手机 流量 
”上 网 的 可 能 性 就 会 比较 大 。 这 时 候 如 果 公众 号 发 送 文章 的 话 ， 就 需要 将 图 片 的 容量 控制 在 上 面 所 
”说 的 1.5~2M， 为 读者 节省 流量 的 同时 也 缩短 图 片 加 载 时 间 。 i 
， ”很 多 读者 在 阅读 文章 时 希望 能 有 一 个 轻松 、 愉 快 的 氛围 ， 不 愿 在 压抑 的 环境 下 阅读 ， 所 以 在 选 
” 择 图 片 时 要 注意 选择 那些 色彩 明亮 的 图 片 这 种 类 型 的 图 片 能 给 读者 天 来 径 松 的 同 读 所 


7.1.3 ”文章 开头 或 结尾 增加 关注 类 图 片 做 宣传 
相信 大 部 分 人 每 天 都 会 阅读 微 信 公 众 平台 推送 的 信息 ， 那 么 大 家 有 注意 到 文章 开头 部 分 的 排版 有 


什么 秘密 吗 ? 
每 个 微 信 平台 上 的 文章 ， 运 营 者 都 会 在 文章 的 开头 处 放 上 如 图 7-10 所 示 的 一 段 邀 请 读者 关注 公众 


号 的 话语 或 者 图 片 。 
加 
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这 段 话 和 图 片 为 什么 要 


人 片 合 一 : 为 什么 说 摄影 的 最 
高 境界 是 你 的 拍 法 即 活 法 ? 
(12 点 打通 感悟 为 自己 收 


1 的 0 
A 
图 7-10 文 


章 开头 排 版 设置 求 关 注 的 案例 
和 在 文章 的 开头 呢 ? 其 实 ， 把 它 排版 在 开头 的 作用 是 让 读者 在 点 开 文章 的 
时 候 就 能 够 点 击 关 注 公 众 平台 ， 以 达到 增加 平台 关注 量 的 目的 。 


超 简单 ， 快 速 剪 辑 /合成 多 镜头 
视频 画面 ! 


的 盘 辑 ,可 
宗 、 盘 辑 点 确 


也 有 很 多 微 信 公 众 号 ， 在 文章 结尾 处 的 排版 中 留 一 个 版 面 ， 对 平台 上 之 前 已 经 推送 过 的 文章 进行 
图 大 全 ”公众 号 为 例 ， 它 就 是 在 文章 结尾 处 排版 时 设置 了 “推荐 阅读 案例 ”， 
还 有 的 公众 号 因为 拥有 自己 的 网 站 ， 所 以 它们 会 在 文章 的 最 下 面 设置 一 个 “阅读 原 


推荐 ， 以 “手术 
如 图 7-11 所 示 。 


文 ”按钮 ， 如 图 7-12 所 示 的 公众 号 一 一 “ 


摄影 构 


图 7-11 文章 结尾 排版 设置 “推荐 阅读 ”案例 


-条 ”。 这 两 种 做 法 ， 都 能 给 平台 的 运营 者 增加 单 击 量 。 


下 点 这 儿 ,来 一 条 生活 馆 于 得 


图 7-12 文章 结尾 排版 设置 原文 阅读 案例 


世 案例 实战 : 微 信 公众 号 广告 设计 


微 信 公 众 号 账户 拥有 者 可 以 跟 自 己 特定 客户 群体 进行 交流 。 这 种 交流 方式 更 加 生动 、 全 面 ， 所 以 


应 该 更 加 注意 自己 公众 号 界面 的 设计 ， 让 客户 群体 可 以 更 好 地 了 解 公众 号 运营 的 内 容 。 下 面 选取 横幅 
广告 Banner、 公 众 号 封面 和 公众 号 求 关注 等 3 个 广告 位 来 做 案例 分 析 。 


7.2.1 横幅 广告 Banner 设 计 


在 制作 横幅 广告 Banner 设 计时 ， 主 要 采用 卡其 色 的 纯色 背景 ， 添 加 一 张 符合 公众 号 特色 的 图 片 ， 
配 上 简洁 明了 的 文字 与 图 形 ， 可 以 很 好 地 将 信息 传递 给 用 户 。 
本 实例 最 终 效 果 如 图 7-13 所 示 。 


网 红 爆 款 手链 ! 只 要 5 种 材料 ~ 
就 可 以 轻松 做 出 来 ! 


1246 十 九 


大 家 好 ,我 是 十 九 -~ 
度 话 不 多 说 ， 先 上 成 品 图 ~ 


.9 
a S ®. 
创意 小 手工 ¢ > 
200 多 款 原 创 体 物 编织 教程 免费 大 放 涝 学 9 
图 7-13 ”实例 效果 


素材 文件 | 素材 \ 第 7 章 \ 手 链 jpg、 公 众 号 界面 1jpg 
效果 文件 | 效果 \ 第 7 章 \ 横 幅 广告 Banner 设 计 .psd、 横 幅 广告 Banner 设 计 jpg 
视频 文件 | 7.2.1 横幅 广告 Banner 设 计 .mp4 


9 STEP 01 单 击 “ 文 件 ”|“ 新 建 ” 命 令 ，@ 弹 出 “新 建文 档 ” 对 话 框 ，@ 设 置 “ 名 称 ” 为 “横幅 广告 
Banner 设 计 ”、“ 宽 度 ” 为 990 像 素 、“ 高 度 ”为 300 像 素 、“ 分 辩 率 ”为 300 像 素 / 英 寸 、“ 颜 色 模 
式 ” 为 “RGB 颜色 ”、“ 背 景 内 容 ” 为 “白色 ”， 合 单 击 “ 创 建 ” 按 钮 ， 如 图 7-14 所 示 ， 新 建 一 个 空 
白 图 像 。 

9 STEP 02 选取 工具 箱 中 的 圆 角 和 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 黄 灰色 ( RGB 参数 值 分 别 为 
166、149、124 ) 、“ 描 边 ” 为 棕色 ( RGB 参 数值 分 别 为 106、57、6 ) 、“ 描 边 宽 度 ” 为 1 像素 、“ 半 
径 ”为 10 像 素 ， 沿 画布 边缘 绘制 一 个 圆 角 矩形 ， 如 图 7-15 所 示 。 


手链 “项链 耳环 说 运 强 久 


图 7-14 设置 各 选项 图 7-15 ”绘制 圆 角 和 珑 形 
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的 “属性 ”面板 中 ， 对 贺 角 逢 形 进行 参数 设置 ， 如 “填充 ”“ 描 边 ”“ 描 边 寅 
a 


9 STEP 03 单 击 “ 文 件 ”|“ 打 开 ” 命 令 , 打开 “手链 .jpg” 素 材 图 像 ， 如 图 7-16 所 示 。 
9 STEP 04 单 击 “ 图 像 |“ 调整 ”|“ 自 然 饱 和 度 ” 命 令 ， 弹 出 “自然 饱和 度 ” 对 话 框 ， 设置“ 自然 饱和 
度 ” 为 100、“ 饱 和 度 ”为 14， 单 击 “ 确 定 ”按钮 ， 效 果 如 图 7-17 所 示 。 


[a 绘制 的 贺 不 满意， 可 以 单 击 “ 窗 口 ”|“ 属 性 ” 
家 指点 ] 如 果 对 绘制 的 圆 角 矩形 不 满意 ， 可 以 单 击 “窗口 ”|“ 属 性 ”命令 ， 在 展开 


图 7-16 素材 图 像 图 7-17 图 像 效 果 
9 STEP 05 单 击 “ 图 像 ”|“ 调 整 ”|“ 亮 度 / 对 比 度 ” 命 令 ， 弹 出 “亮度 /对 比 度 ”对 话 框 ， 设 置 “ 对 比 
度 ” 为 35， 单 击 “ 确 定 ” 按 钮 ， 效 果 如 图 7-18 所 示 。 
9 STEP 06 运用 移动 工具 将 素材 图 像 拖 中 至 背景 图 像 编辑 窗口 中 ， 适 当 调整 图 像 的 大 小 和 位 置 ， 如 图 7-19 
所 示 。 


2 


图 7-18 图像 效果 图 7-19 拖 慢 图 像 
9 STEP 07 运用 椭圆 选 框 工具 绘制 一 个 正 圆 形 选区 ， 按 Shift+Ctrl+I 组 合 键 ， 反 选 选区 ， 如 图 7-20 所 示 。 
9 STEP 08 按 Delete 键 删除 选区 内 的 图 像 ， 按 Ctrl+D 组 合 键 ， 取 消 选 区 ， 效 果 如 图 7-21 所 示 。 


图 7-20 反选 选区 图 7-21 取消 选区 
9 STEP 09 选取 工具 箱 中 的 横 排 文 字 工具 ， 单 击 “ 窗 口 ”| “字符 ”命令 ， 加 弹出 “字符 ”面板 ，@@ 设 置 
字体 系列 为 “ 华 康 娃娃 体 W5 ( P ) ”、 字 体 大 小 为 16.8 点 、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 
全 并 激活 仿 粗 体 图 标 ， 如 图 7-22 所 示 。 
© STEP 10 在 图 像 编辑 窗口 中 输入 文字 ， 运 用 移动 工具 将 文字 移动 至 合适 位 置 ， 效 果 如 图 7-23 所 示 。 


@ 漳 出 


全 激活 


图 7-22 设置 各 选项 图 7-23 输入 文字 
e STEP 11 单 击 “图 层 ”|“ 图 层 样式 ”|“ 投 影 ” 命 令 ， 人 @ 弹 出 “图 层 样式 ”对 话 框 ， 全 设置 “不 透明 
度 ” 为 75%、“ 和 角度” 为 90 度 、“ 距 离 ” 为 5 像素 、“ 扩 展 ” 为 10%、“ 大 小 ”为 7 像素 ， 如 图 7-24 所 示 。 
9 STEP 12 单 击 “ 确 定 ”按钮 ， 即 可 为 文字 添加 “投影 ”图 层 样式 ， 效 果 如 图 7-25 所 示 。 


Pa 
CS Ne 
~ 


图 7-24 设置 各 参数 图 7-25 添加 “投影 ”图 层 样式 
9 STEP 13 选取 工具 箱 中 的 直线 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 填 充 ” 为 
白色 ( RGB 参 数值 均 为 255 ) 、“ 粗 细 ” 为 2 像素 ， 绘 制 直线 形状 ， 如 图 7-26 所 示 。 
9 STEP 14 选取 工具 箱 中 的 横 排 文 字 工具 ， 设 置 “字体 系列 ”为 “方正 卡通 简体 ”、“ 字 体 大 小 ”为 7.2 
点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -25、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 为 255 ) ， 在 图 像 编辑 窗口 


中 输入 文字 ， 如 图 7-27 所 示 。 
全 " 创意 小 字 正 
oo 多 款 原 创 饰物 编织 教程 免费 大 放送 


图 7-26 绘制 直线 图 7-27 输入 文字 
9 STEP 15 选取 工具 箱 中 的 多 边 形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 黄色 ( RGB 参数 值 分 别 为 
234、209、73 ) 、“ 描 边 ”为 无 ，@ 选 中 “ 星 形 ” 复 选 框 ， 合 设置 “ 缩 进 边 依据 ”为 53%、“ 边 ”为 
4， 如 图 7-28 所 示 。 
9 STEP 16 按 住 Shift 键 的 同时 ， 在 图 像 编辑 窗口 中 按 住 鼠 标 左 键 并 拖 披 ， 绘 制 一 个 星 形 ， 如 图 7-29 


所 示 。 
DO i > ST “到 工 
选 。 切 1 a 
@ 克 中 ed | 后 Fp 


图 7-28 设置 各 选项 图 7-29 ”绘制 一 个 星 形 
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[Ee > 半径 : 可 以 设置 多 边 形 或 者 星 形 的 半径 长 度 ， 绘制 时 就 将 创建 指定 半径 值 


: 的 多 边 形 或 星 形 。 

”> 平滑 扬 角 : 创建 具有 平滑 扬 角 的 多 边 形 或 者 星 形 。 | 

。 > 星 形 : 选中 该 复 选 栏 可 以 创建 星 形 ， 在 “ 缩 进 边 依据 ”选项 中 可 以 设置 星 形 边 练 向 中 心 久 进 
的 数量 ， 该 值 越 高 ， 缩 进 量 越 大 车 选 中 “平滑 缩 进 ” 复 选 框 ， 可 以 使 星 形 的 边 平 滑 地 向 中 
心 缩 进 。 : 


© STEP Pp 17 选取 工具 箱 中 的 直接 选择 工具 ， 适当 调整 蜂 形 两 个 角 的 长 度 ， 效果 如 图 30 所 示 。 
9 STEP 18 选取 工具 箱 中 的 移动 工具 ， 按 Ctrl+T 组 合 键 ， 调 出 变换 控制 框 ， 在 工具 属性 栏 中 设置 “ 旋 
转 ” 为 25 度 ， 此 时 图 像 编 辑 窗口 中 的 图 像 也 随 之 旋转 ， 如 图 7-31 所 示 。 


图 7-30 调整 星 形 角 的 长 度 图 7-31 旋转 图 像 
9 STEP 19 按 Enter 键 确认 变换 ， 并 将 图 像 移 至 合适 位 置 ， 效 果 如 图 7-32 所 示 。 
9 STEP 20 选取 工具 箱 中 的 横 排 文 字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 卡通 简体 ”、 
“字体 大 小 ”为 6 点 、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 在 图 像 编辑 窗口 中 输入 文字 ， 如 
图 7-33 所 示 。 


 ， 创意 省 
oo 多 款 原 创 饰 和 Ea 大 必 还 


图 7-32 ”移动 图 像 图 7-33 输入 文字 
9 STEP 21 选中 除 “ 背 景 ”图 层 外 的 所 有 图 层 ， 按 Ctrl+G 组 合 键 ， 为 图 层 编组 ， 得 到 “组 1” 图 层 组 ， 如 
图 7-34 所 示 。 
9 STEP 22 按 Ctrl+O 组 合 键 ， 打开“ 公众 号 界面 1jpg” 素 材 图 像 ， 运 用 移动 工具 将 图 层 组 的 图 像 拖 虹 至 
刚 打开 的 图 像 编辑 窗口 中 ， 适当 调整 图 像 的 位 置 ， 效果 如 图 7-35 所 示 。 


手 人 斋 畏 着 鲜 京 这 全 凡 


创意 ， ls 


200 多 雪原 创 馆 物 编 积 教程 免费 大 放送 


EE Ns 网 红 规 款 手链 只 要 5 种 材料 ~ 
Ei. ~ 不 省 明度 : 100% ~ 就 可 以 轻松 做 出 来 | 
+ 
铅 丰 :图 w 中 车 四 填充:100% ~ 
© 
@@ [六 附 景 [5] 
[ 得 到 | 


图 7-34 得 到 “组 1” 图 层 组 图 7-35 ”图像 效果 


中 所 口 8. 白 日 症 


7.2.2 ”公众 号 封面 设计 


在 制作 公众 号 封面 设计 时 ， 主 要 以 渐变 的 红色 作为 背景 色 ， 对 字体 与 图 像 进行 部 分 隐藏 与 显示 ， 
使 人 物 与 字体 融 为 一 体 ， 再 添加 适当 的 装饰 ， 展 现 出 周年 庆 的 热闹 气氛 。 
本 实例 的 最 终 效 果 如 图 7-36 所 示 。 


€ 了 


责 看 全 文 


公众 号 1 周年 庆 ! 瓯 思 回 馈 ， 精 心 挽 选 
10 重 好 礼 大 放送 | 


查看 全 文 


二 | ”干货 分 享 。 ”好 书 推荐 。 教程 模板 


图 7-36 ”实例 效果 


素材 文件 | 素材 第 7 章 \ 封 面 文 字 .psd、 封 面 人 物 .jpg、 装 饰 .psd、 公 众 号 界面 2jpg 
二 | 效果 文件 “| 效果 \ 第 7 章 \ 公 众 号 封面 设计 .psd、 公 众 号 封面 设计 jpg 


eSTEP 01 单 击 “文件 ” |“ 新建 ”命令 ,人 @ 弹 出 “新 建文 档 ” 对 话 框 ， 全 设置 “名 称 ” 为 “公众 号 封 
面 设 计 ”、“ 宽 度 ”为 1080 像 素 、“ 高 度 ” 为 627 像 素 、“ 分 辨 率 ” 为 300 像 素 / 英 寸 、“ 颜 色 模式 ”为 
“RGB 颜色 ”、“ 背 景 内 容 ” 为 “白色 ”， 合 单 击 “ 创 建 ” 按 钮 ， 如 图 7-37 所 示 ， 新 建 一 个 空白 图 像 。 

9 STEP 02 展开 “图 层 ” 面 板 ， 新 建 一 个 图 层 ， 选 取 工 具 箱 中 的 渐变 工具 ， 在 工具 属性 栏 上 单 击 “ 点 
按 可 编辑 渐变 ”按钮 ， 弹 出 “渐变 编辑 器 ”对 话 框 ， 选 择 渐变 条 左 侧 的 色 标 ， 单 击 “颜色 ” 右 侧 的 色 
块 ， 加 弹出 “ 拾 色 器 ( 色 标 颜色 ) ”对 话 框 ，@ 设 置 RGB 参 数值 分 别 为 255、0、6， 如 图 7-38 所 示 。 


图 7-37 设置 各 选项 图 7-38 设置 RGB 参数 值 
9 STEP 03 单 击 “ 确 定 ” 按 钮 ， 返 回 “ 渐 变 编辑 器 ”对 话 框 ， 用 与 上 同样 的 方法 @ 设 置 另 一 个 色 标的 颜 
色 为 深 红色 ( RGB 参 数值 分 别 为 105、0、3 ) ，@ 单 击 “ 确 定 ”按钮 ， 如 图 7-39 所 示 。 
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9 STEP 04 单 击 工 具 属性 栏 中 的 “ 径 向 渐变 ”按钮 ， 将 鼠标 指针 移 至 图 像 编辑 窗口 中 的 适当 位 置 ， 按 住 
鼠标 左 键 并 拖 卸 ， 释 放 鼠 标 左 键 ， 即 可 填充 渐变 颜色 ， 效 果 如 图 7-40 所 示 。 


LE _ mso 


图 7-39 设置 另 一 个 色 标 的 颜色 图 7-40 填充 渐变 颜色 
- 渐变 工具 用 来 在 整个 文档 或 选区 内 填充 渐变 颜色 。 渐 变 在 Photoshop 中 的 应 用 : 
~ “> 非常 广泛 ， 它 不 仅 可 以 填充 图 像 ， 还 可 以 用 来 填充 图 层 蒙 版 、 快 速 蒙 版 和 通道 。 此 
外 ,调整 图 层 和 填充 图 层 也 会 用 到 渐变 。 
渐变 编辑 器 中 的 “位 置 ”文本 框 中 显示 标记 点 在 渐变 效果 预览 条 的 位 置 ， 用户 可 以 输入 数字 

来 改变 颜色 标记 点 的 位 置 ， 也 可 以 直接 拖 旧 渐变 颜色 带 下 端的 颜色 标记 点 。 
9 STEP 05 按 Ctrl+O 组 合 键 ， 打开 “封面 文字 psd” 素 材 图 像 ， 如 图 7-41 所 示 。 
9 STEP 06 @ 展 开 “ 路 径 ” 面 板 ，@ 选 择 “ 路 径 1” 路 径 ， 全 单 击 面 板 下 方 的 “将 路 径 作为 选区 载 入 ” 

按钮 ， 如 图 7-42 所 示 。 


@@ 羊 击 


90 nO Oe 


打开 
图 7-41 素材 图 像 图 7-42 单 击 “ 将 路 径 作为 选区 载 入 ”按钮 
9 STEP 07 切换 至 “图 层 ” 面 板 ， 按 Shift+Ctrl+N 组 合 键 ， 新 建 一 个 图 层 ， 并 填充 黑色 ( RGB 参数 值 均 
为 0 ) ， 按 Ctrl+D 组 合 键 ， 取 消 选 区 ， 效 果 如 图 7-43 所 示 。 
9 STEP 08 按 Ctrl+O 组 合 键 ， 打开“ 封面 人 物 .jpg” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 忠 至 “封面 
文字 ”图 像 编辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 7-44 所 示 。 
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图 7-43 ”取消 选区 图 7-44 拖 旬 图 像 
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9 STEP 09 选择 “图 层 3” 图 层 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “创建 剪贴 蒙 版 ”命令 ， 
藏 部 分 人 物 图 像 ， 效 果 如 图 7-45 所 示 。 

9 STEP 10 选取 工具 箱 中 的 画笔 工具 ， 设 置 前 景色 为 黑色 ( RGB 参 数值 均 为 0 ) ， 选 择 “ 图 层 2” 图 层 ， 
在 图 像 编辑 窗口 中 适当 涂抹 ， 显 示 部 分 人 物 图 像 ， 效 果 如 图 7-46 所 示 。 


L 


图 7-45 ”隐藏 部 分 人 物 图 像 图 7-46 显示 部 分 人 物 图 像 
e STEP 11 隐藏 “背景 ”图 层 ， 按 ShiftrCtrl+Alt+E 组 合 键 ， 盖 印 可 见 图 层 ， 将 盖 印 的 图 像 拖 电 至 背景 图 
像 编辑 窗口 中 ， 适 当 调整 图 像 的 位 置 ， 效 果 如 图 7-47 所 示 。 
e@STEP 12 双击 “图 层 2” 图 层 ， 打 开 “ 图 层 样式 ”对 话 框 ， 选 中 “投影 ” 复 选 框 ， 设 置 “不 透明 度 ” 
为 60%、“ 角 度 ” 为 90 度 、“ 距 离 ” 为 18 像 素 、“ 扩 展 ” 为 10%、“ 大 小 ”为 25 像 素 ， 单 击 “确定 ” 
按钮 ， 即 可 添加 “投影 ”图 层 样式 ， 如 图 7-48 所 示 。 


图 7-47 拖 如 图 像 图 7-48 添加 “投影 ”图 层 样式 

9 STEP 13 单 击 “文件 " | “打开 ”命令 ， 打 开 “ 装 饰 psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 电 至 
背景 图 像 编辑 窗口 中 的 适当 位 置 ， 如 图 7-49 所 示 。 

9 STEP 14 在 “图 层 ” 面 板 中 ， 将 图 层 调整 至 “图 层 1” 图 层 上 方 ， 效 果 如 图 7-50 所 示 。 


图 7-49 拖 避 图 像 图 7-50 调整 图 层 顺序 

9 STEP 15 在 “调整 ”面板 中 ， 单 击 “ 亮 度 /对比 度 ”按钮 ， 新 建 “ 亮 度 /对 比 度 1” 调 整 图 层 ，@ 在 展开 
的 “属性 ”面板 中 ， 人 设置 “亮度 ”为 5S、“ 对 比 度 ” 为 100， 各 并 单 击 面板 下 方 的 “此 调整 剪 切 到 此 

图 层 ” 按 钮 ， 如 图 7-51 所 示 。 

9 STEP 16 再 在 “调整 ”面板 中 单 击 “ 曲 线 ”按钮 ， 新 建 “ 曲 线 1” 调 整 图 层 ， 展 开 “ 属 性 ”面板 ， 在 

折线 上 单 击 鼠 标 左 键 新 建 一 个 控制 点 ， 在 下 方 设置 “输入 ”为 130、“ 输 出 ”为 166， 并 单 击 面板 下 方 
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的 “此 调整 剪 切 到 此 图 层 ” 按 钮 ， 效 果 如 图 7-52 所 示 。 
了 
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画 
口 抠 上 妇 = 一 
@ 设 置 


>»o se 
图 7-51 单 击 “ 此 调整 前 切 到 此 图 层 ” 按 钮 图 像 效 果 


9 STEP 17 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ” 画板 中 设置 “字体 系列 ”为 “方正 粗 宋 简体 ”、 
“字体 大 小 ”为 10 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 200、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 为 
255 ) ， 在 图 像 编 辑 窗口 中 输入 文字 ， 如 图 7-53 所 示 。 
9 STEP 18 按 住 Ctl 键 ,文字 周围 会 出 现 控制 框 ， 将 鼠标 光标 移 至 控制 框 外 侧 ， 当 光标 呈 形状 时 ， 适 当 
旋转 文字 ， 并 按 Ctrl+Enter 组 合 键 确认 输入 ， 并 适当 调整 文字 的 位 置 ， 效 果 如 图 7-54 所 示 。 


图 7-53 输入 文字 图 7-54 等 

e@STEP 19 单 击 “图 层 ”面板 底部 的 “添加 图 层 样式 ”按钮 ， 如 图 7- 55 所 示 。 

9 STEP 20 在 弹出 的 菜单 中 选择 “投影 ”选项 ， 打 开 “ 图 层 样式 ”对 话 框 ， 设 置 “不 透明 度 ”为 70%、 
“距离 ”为 3 像素 、“ 扩 展 ” 为 10%、“ 大 小 ”为 7 像素 ， 单 击 “ 确 定 ” 按 钮 ， 即 可 添加 “投影 ”图 层 
样式 ， 效 果 如 图 7-56 所 示 。 


Pa vo@THAS® 
下 党 ~ 不通 明度 : 100% ~ 


议 E: 田中 二 全 志 %i: 100% ~ 
© 图 层 > fr~ 
© r@8 曲线 1 
@@ 上 G 28[ |] 识 度 风 比 度 1 
单 击 
°°“ 
© 景 a 
从 口 9. 白 日 全 
图 7-55 ” 单 击 “添加 图 层 样式 ”按钮 图 7-56 添加 “投影 ”图 层 样式 
© STEP 21 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 粗 宋 简体 ”、 
“字体 大 小 ”为 6 点 、“ 行 距 ” 为 7 点 、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 在 图 像 编辑 窗口 中 


输入 文字 ， 如 图 7-57 所 示 。 


Photoshop 中 的 文字 是 使 用 PostScript 信 息 从 数学 上 定义 的 直线 或 曲线 来 表示 的 ， | 
| 指点 ) 如 果 没有 设置 消除 锯齿 ， 文 字 的 边缘 便 会 产生 硬 边 和 锯齿 。 所 以 在 输入 文字 时 ， 可 ， 
以 此 在 工具 属性 覆 或 ， “字符 ”面板 中 设置 消除 锯齿 的 方式 ， 如 锐利 、 犀 利 、 浑 厚 、 平滑 等 。 


@ STEP 22 选中 相应 文字 ， 设 置 “字体 大 小 ”为 10 点 ， 效 果 如 图 7-58 所 示 。 


图 7-57 输入 文字 图 7-58 设置 字体 大 小 

9 STEP 23 选中 相应 文字 ， 设 置 “颜色 ”为 黄色 ( RGB 参 数值 分 别 为 255、236、0 ) ， 在 “图 层 ” 面 板 
中 单 击 文字 图 层 ， 即 可 确认 输入 ， 效 果 如 图 7-59 所 示 。 

9 STEP 24 选择 “好 礼 大 放送 ! ”文字 图 层 ， 单 击 鼠 标 右 键 ， 在 弹出 的 快捷 菜单 中 选择 “拷贝 图 层 样 
式 ” 命 令 ， 并 将 图 层 样 式 粘贴 在 另 一 文字 图 层 上 ， 效 果 如 图 7-60 所 示 。 
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图 7-59 ”确认 输入 图 7-60 ”粘贴 图 层 样式 
9 STEP 25 按 Shift+Ctrl+Alt+E 组 合 键 ， 盖 印 可 见 图 层 ， 得 到 “图 层 3” 图 层 ， 如 图 7-61 所 示 。 
9 STEP 26 按 Ctrl+O 组 合 键 ， 打开“ 公众 号 界面 2jpg” 素 材 图 像 ， 运 用 移动 工具 将 盖 印 的 图 像 拖 虹 至 刚 
打开 的 图 像 编辑 窗口 中 ， 适 当 调整 图 像 的 大 小 和 位 置 ， 效 果 如 图 7-62 所 示 。 
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© os 进度 刚 比 度 1 a 拖 虽 
© ) 回 组 1 
中 所 8 有 白 昌 全 训 。 干 售 分 享 。。 季 书 推荐 。 到 程 革 板 


图 7-61 得 到 “图 层 3” 图 层 图 7-62 ”图像 效果 
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7.2.3 ”公众 号 求 关注 设计 


在 制作 公众 号 求 关注 设计 时 ， 运 用 和 矩形 工具 绘制 出 虚线 框 ， 加 上 适当 的 装饰 性 图 形 ， 再 放 入 二 维 
码 ， 配 上 一 些 说 明 性 文字 ， 即 可 完成 设计 。 
本 实例 的 最 终 效 果 如 图 7-63 所 示 。 


A. 


龙 飞 
一 位 风光 摄影 家 ， 也 是 资 尝 户 外 旅行 家 
个 人 强 信 号，157075539 


9 STEP 01 单 击 “文件 ” |“ 新 建 ”命令 ， 和 加 弹出 “新 建文 档 ” 对 话 框 ， 四 设置 “名 称 ” 为 “公众 号 求 关 
注 设计 ”、“ 宽 度 ”为 990 像 素 、“ 高 度 ” 为 1123 像 素 、“ 分 辨 率 ”为 300 像 素 /英寸 、“ 颜 色 模 式 ” 为 
“RGB 颜 色 ”、“ 背 景 内 容 ” 为 “白色 ”， 全 单 击 “ 创 建 ” 按 钮 ， 如 图 7-64 所 示 ， 新 建 一 个 空白 图 像 。 

9 STEP 02 选取 工具 箱 中 的 矩形 工具 ， 沿 画布 边缘 绘制 一 个 矩形 形状 ， 人 @ 在 弹出 的 “属性 ”面板 中 全 设 
置 “ 填 充 ” 为 白色 ( RGB 参 数值 均 为 255 ) 、“ 描 边 ”为 黑色 ( RGB 参 数值 均 为 0) 、“ 描 边 宽度 ”为 
3 像素 ，@ 单 击 “ 描 边 类 型 ” 右 侧 的 下 拉 按 钮 ， 在 弹出 的 列表 框 中 人 @ 选 择 第 二 种 虚线 ， 并 在 下 方 @ 设 

置 “ 虚 线 ” 为 3、“ 间 隙 ”为 3， 如 图 7-65 所 示 。 
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图 7-64 设置 各 选项 图 7-65 设置 各 选项 


9 STEP 03 单 击 “文件 | “打开 ”命令 ， 打 开 “ 头 像 jpg” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 卸 至 
季 景 图 像 编辑 窗口 中 ， 适 当 调 整 图 像 的 大 小 与 位 置 ， 如 图 7-66 所 示 。 
eSTEP 04 选取 工具 箱 中 的 椭 回 选 框 工具 ， 在 图 像 编辑 窗口 中 绘制 一 个 正 回 选 杠 ， 如 图 7-67 所 示 。 


选区 在 图 像 编辑 过 程 中 有 着 重要 的 作用 ， 它 限制 着 图 像 编辑 的 范 转 和 区 域 ， 
/ 灵活 而 巧妙 地 应 用 选区 ， 能 得 到 许多 意 想 不 到 的 效果 。 


osTEP 05 按 ShifttCtrlI 组 合 键 ， 反选 选区 ， 接 Delete 键 删除 选区 内 的 图 像 ， 按 CtrlD 组 合 键 ， 到 和 
区 ， 效 果 如 图 7-68 所 示 。 


拖 曙 


图 7-66 拖 复 图 像 图 7-67 绘制 正 圆 选 框 图 7-68 取消 选区 

9 STEP 06 单 击 工具 箱底 部 的 前 景色 色 块 ，@@ 弹 出 “ 拾 色 器 ( 前 景色 ) ”对 话 框 ，@ 设 置 RGB 参 数值 分 
别 为 193、34、50， 如 图 7-69 所 示 。 

9 STEP 07 新 建 一 个 图 层 ， 选 取 工 具 箱 中 的 自 定形 状 工具 ， 在 

工具 属性 栏 中 设置 “选择 工具 模式 ”为 “像素 ”、“ 形 状 ” 
为 “方块 形 卡 ”， 按 住 Shift 键 的 同时 ， 在 图 像 编 辑 窗口 中 的 
适当 位 置 绘制 一 个 形状 ， 如 图 7-70 所 示 。 

9 STEP 08 选取 工具 箱 中 的 矩形 选 框 工 具 ， 在 图 像 编 辑 窗口 中 
绘制 一 个 矩形 选 框 ， 如 图 7-71 所 示 。 

9 STEP 09 在 选区 内 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 


“通过 剪 切 的 形状 图 层 ” 命令 ， 如 图 7-72 所 示 。 本 
绘制 Fa 
绘制 ee 
图 7-70 ”绘制 形状 图 7-71 绘制 矩形 选 框 图 7-72 ”选择 “通过 剪 切 的 形状 


图 层 "命令 
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9 STEP 10 执行 上 述 操作 后 ， 即 可 将 选区 内 的 图 像 剪 切 为 一 个 新 图 层 ， 运 用 移动 工具 适当 调整 图 像 的 位 
置 ， RRs 


创建 选区 后 ， 用 户 如 果 要 使 用 画笔 绘制 选区 边缘 的 图 像 ， 或 者 对 选中 的 图 像 
| en “视图 ”|“ 显 示 ”|“ 选 区 边缘 ”命令 ， 或 者 按 CtrltH 组 合 
， 键 ， 隐 藏 选区 边缘 ， 这 样 可 以 更 加 清楚 地 看 到 选区 边缘 图 像 的 变化 情况 。 
| 但 是 ， 选 区 虽然 隐藏 了 ， 但 并 不 等 于 不 存在 ， 它 仍 会 限定 操作 的 有 效 区 域 ; 如果 要 再 次 显示 ， 
”选区 边缘 ， 可 以 再 次 单 击 “ 视 图 ”|“ 显 示 ”|“ 选 区 边缘 ”命令 ， 或 者 按 CtrltH 组 合 键 。 


eSTEP 11 按 住 Cui 刍 的 同时 ， 单 击 “图 层 3” 图 层 的 图 层 缩 览 图 ， 将 其 载 入 选区 ， 如 图 7- 74 所 示 。 
9 STEP 12 设置 前 景色 为 深蓝 色 ( RGB 参数 值 分 别 为 19、27、73 ) ， 为 选区 填充 前 景色 ， 并 取消 选区 ， 
效果 如 图 7-75 所 示 。 


A :A 
移动 4 [取消 选区 | 
a 
图 7-73 调整 图 像 位 置 图 7-74 ” 载 入 选区 图 7-75 取消 选区 


-了 Ei- 。 像素 是 组 成 图 像 的 最 小 元 来。 由 二 它们 都 是 正方 形 的 ， 所 以 在 他 建国 形 、 多 边 ， 

| 专家 指点 】 天 不 规则 迁 区 时 便 容易 产生 名 淄 ， 此 时 可 以 选中 工具 属性 栏 中 的 “消除 名 次 ” 复 
， 选 框 回 海 8B 目 ， 选 中 该 选项 后 ，Photoshop 会 在 选区 边缘 1 个 像素 宽 的 范围 内 添加 与 周围 图 像 相近 
， 的 颜色 ， 使 选区 看 上 去 光滑 一 些 。 | 


© STEP 13 选取 工具 箱 中 的 模 排 文字 工具 ， 本 .字符 ， 面板 中 设置 ， “字体 系列 " 有 “方正 大 黑 简体 ” 
“字体 大 小 ”为 12 点 、“ 颜 色 ” 为 深 灰 色 ( RGB 参 数值 均 为 58 ) ， 在 图 像 编 辑 窗口 中 输入 文字 ， 如 
图 7-76 所 示 。 

9 STEP 14 按 Ctrl+J 组 合 键 复制 文字 图 层 ， 运 用 移动 工具 将 其 移 至 合适 的 位 置 ， 在 “字符 ”面板 中 设置 
“字体 大 小 ”为 10 点 ， 并 修改 文本 内 容 ， 效 果 如 图 7-77 所 示 。 

eSTEP 15 选取 工具 箱 中 的 横 排 文 字 工 具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 细 黑 一 简 
体 ”、“ 字 体 大 小 ”为 10 点 、“ 颜 色 ” 为 灰色 ( RGB 参数 值 均 为 58 ) ， 并 激活 仿 粗 体 图 标 ， 在 图 像 编 
辑 窗口 中 输入 文字 ， 效 果 如 图 7-78 所 示 。 

9 STEP 16 按 Ctri+O 组 合 键 ， 打 开 “ 二 维 码 .psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 中 至 背景 图 像 
编辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 7-79 所 示 。 

e@STEP 17 选中 除 “ 背 景 ”图 层 外 的 所 有 图 层 ， 按 Ctrl+G 组 合 键 ， 为 图 层 编组 ， 得 到 “组 1” 图 层 组 ， 如 
图 7-80 所 示 。 


eSTEP 18 打开 “公众 号 界面 3.jpg” 素 材 图 像 ，i 


刚 打 开 的 图 像 编辑 窗 


， 适 当 调整 图 像 的 位 置 ， 效 果 如 图 7-81 所 示 。 


人 4 


A 


龙 飞 
一 位 风光 摄影 家 ， 也 是 资深 户外 旅行 家 


图 7-76 输入 文字 图 7-77 修改 文本 内 容 
0. | .9. 
a 


一 位 风光 摄影 家 ， 也 是 资深 户外 旅行 家 
个 人 短信 和 号: 157075539 


欣赏 大 师 级 摄影 作品 


图 7-78 ”给 入 文字 
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Lisa | 


图 7-81 图像 效果 


运用 移动 工具 将 图 层 组 的 图 像 拖 中 至 
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微 信 小 程序 是 一 种 不 需要 下 载 安装 即 可 使 用 的 应 用 ， 用 户 扫 一 扫 或 者 搜 一 
下 即 可 打开 应 用 。 它 的 出 现 将 会 让 应 用 无 处 不 在 ， 随 时 可 用 ， 但 又 无 须 安装 部 
载 。 微 信 小 程序 将 成 为 一 个 新 的 热潮 


> 体现 小 程序 的 功能 界面 b> 旅游 小 程序 界面 设计 
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> 以 独特 创意 提升 用 户 体验 
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至 果 南 族 ， 回 昧 无穷 的 口感 ! 
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随 着 小 程序 的 火热 ， 它 出 现在 
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[E 玉 用 前 期 准备 : 微 信 小 程序 界面 设计 要 点 


小 程序 界面 设计 要 点 。 


8.1.1 体现 小 程序 的 功能 界面 


小 程序 有 多 个 界面 ， 不 同 的 界面 效果 与 功能 都 不 同 。 如 图 8-1 所 示 为 “K 米 点 歌 台 ” 的 小 程序 界 
面 ， 左 图 为 主 界面 ， 将 歌曲 分 为 几 个 大 类 ， 并 把 搜索 框 安排 在 界面 中 间 部 分 ， 可 以 方便 


的 歌曲 ; 


每 个 界面 都 有 其 不 同 


1) 


在 移动 设备 上 使 


排版 时 ， 


过 于 


tD 


右 图 为 遥控 界面 ， 它 的 功 


E 大 众 眼中 的 次 数 也 越 来 越 频 繁 。 越 来 越 多 的 商家 看 到 了 其 中 的 商 


机 ， 不 断 地 制作 出 更 多 小 程序 。 但 是 如 何 设计 出 一 个 精美 又 实用 的 界面 呢 ? 本 节 主 要 向 读者 介绍 微 信 


能 主要 是 为 已 经 进入 到 包厢 的 用 户 控 


制 歌曲 而 设计 的 。 


XX K 米 点 歌 台 


K 米 VIP 


XX K 米 点 歌 台 


， 为 你 而 “ 声 ” 


人 PA Le 


及 


多 花 点 工夫 在 排版 上 


应 该 适当 放大 这 些 元 素 和 
避免 使 用 花哨 元 素 


花哨 的 元 素 在 小 屏幕 上 容易 “ 吸 ” 走 用 户 的 注意 力 ， 使 其 反而 忽略 了 了 


增加 用 户 的 网 络 流量 和 载 入 时 间 。 


3) 


注意 导航 系统 设计 


以 确保 


户 不 会 在 页 面 中 迷失 ， 同 


如 图 8-2 所 示 是 “ 途 家 ”小 程序 的 首页 ， 它 通过 地 点 和 时 


馆 。 当 


户 选 好 喜欢 的 旅馆 以 后 ， 


图 8-1 “KK 米 点 歌 台 ”的 小 程序 界面 


文字 ， 同 时 加 大 间距 。 


时 要 注意 导航 栏 功能 的 顺序 要 符合 


户 的 下 一 步 预 期 。 


间 两 点 ， 来 快速 得 选用 户 可 和 


就 会 弹出 相应 界面 ， 引 导 用 户 完 成 


界面 色彩 也 很 统一 ， 可 以 带 给 用 户 舒 适 的 体验 。 


单 的 过 程 。 同 时 ， 


户 寻找 需要 


的 功能 ， 如 何 让 这 些 功 能 更 快速 地 传达 给 用 户 呢 ? 可 以 从 以 下 三 点 来 考虑 。 


程序 ， 不 像 是 在 电脑 上 使 用 那么 轻松 自在 ， 所 以 在 为 小 程序 的 元 素 和 文字 进行 


E 要 的 信息 ， 同 时 也 会 


在 设计 小 程序 的 时 候 要 着 重 注意 导航 栏 。 大 部 分 小 程序 是 通过 导航 栏 来 分 割 其 功能 的 。 导 航 栏 可 


E 感 兴趣 的 旅 


其 小 程序 的 
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X 话 家 一 旅 泛 中 的 家 


8.1.2 ”内 容 围绕 主 营业 务 设计 


小 程序 是 一 种 不 需要 下 载 安装 即 可 使 用 的 应 用 。 作 为 一 个 应 用 ， 它 会 有 自己 的 功 


在 设计 时 要 注意 ， 所 有 的 内 容 ， 都 需要 围绕 着 主 营 业务 来 转 。 这 样 可 以 让 用 户 很 快 地 明 


销 内 容 ， 并 判断 出 是 否 有 自己 需求 的 东西 。 


如 图 8-3 所 示 为 “京东 购物 ”的 小 程序 首页 ， 它 的 功能 主要 是 促成 商品 的 
-个 选 购 商品 的 小 程序 。 


示 了 多 种 多 样 的 商品 ， 让 人 可 以 很 快 地 明白 ， 这 是 


能 与 业务 ， 所 以 


小 程序 的 营 


交易 ， 所 以 它 的 首页 上 展 


为 了 更 全 面 地 展示 商品 的 信息 ，“ 京 东 购物 ”小 程序 中 的 商品 都 有 单独 的 详情 页 ， 用 户 只 需要 单 
击 自己 中 意 的 商品 ， 即 可 进入 到 详情 页 面 ， 查 看 更 多 关于 此 商品 的 信息 ， 如 图 8-4 所 示 。 


X 商品 详情 


图 8-3 “京东 购物 ”小 程序 首页 


8.1.3 ”以 独特 创意 提升 用 户 体验 


虽然 现在 的 小 程序 有 很 多 ， 但 它们 的 界面 设计 却 都 是 千篇一律 。 如 果 说 能 设计 
序 界面 ， 可 以 让 用 户 有 眼前 一 亮 的 感觉 ， 那 么 用 户 会 很 愿意 更 深入 地 了 解 小 程序 里 面 的 内 


图 8-4 
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“京东 购物 ”小 程序 界面 


H 一 个 不 一 样 的 小 程 


如 图 8-5 所 示 为 “天 天 P 图 ”的 小 程序 界面 。 它 的 界面 很 特别 ， 界 面 仅 有 两 个 按钮 ， 
殊 ， 它 不 同 于 其 他 小 程序 的 按钮 只 是 简单 的 方 框 和 文字 ， 它 是 一 张 很 形象 的 图 ， 用 户 局 


谷 。 
并 且 按 钮 很 特 


以 直接 从 按钮 
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上 得 知 此 功能 的 效果 。 
单 击 进 其 中 的 一 个 功能 ， 即 可 进入 到 具体 的 编辑 界面 ， 如 图 8-6 所 示 。 界 面 中 展示 了 一 些 用 户 已 经 P 好 
的 美 照 ， 这 些 图 片 可 以 让 用 户 对 此 功能 产生 更 浓厚 的 兴趣 ， 进 而 单 击 尝试 用 此 功能 来 处 理 自己 的 照片 。 


X 天 天 P 图 X 变 身 福娃 去 拜年 - X 变 身 福娃 去 天 年 


G9 
美丽 大 头巾 ” 
立即 变 身 
图 8-5 “天 天 P 图 ”的 小 程序 界面 图 8-6 “天 天 P 图 ”的 小 程序 界面 


案例 实战 : 微 信 小 程序 界面 设计 


了 解 微 信人 小 程序 界面 设计 的 要 点 后 ， 就 可 以 开始 设计 小 程序 界面 了 。 设 计时 切记 要 联系 设计 要 点 
来 思考 ， 才 能 设计 出 精美 实用 的 界面 。 


8.2.1 旅游 小 程序 界面 设计 

在 制作 旅游 小 程序 界面 时 ， 主 要 采用 白色 作为 背景 色 ， 标 题 栏 采用 明亮 的 蓝 色 ， 对 比 非常 清晰 ， 
并 添加 色彩 丰富 的 菜单 图 标 ， 使 画面 整体 更 加 和 谐 。 

本 实例 的 最 终 效果 如 图 8-7 所 示 。 
ac 一 
999e9 ee 
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图 8-7 ”实例 效果 
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素材 \ 第 8 章 \ 状 态 栏 jpg、 下 拉 按钮 .psd、 功 能 菜单 jpg、 武 汉 风景 .jpg、 导 航 
素材 文件 re 
栏 图 标 .psd 


效果 文件 “| 效果 \ 第 8 章 \ 旅 游 小 程序 界面 设计 .psd、 旅 游 小 程序 界面 设计 .jpg 
视频 文件 “| 8.2.1 旅游 小 程序 界面 设计 -mp4 


9 STEP 01 单 击 “ 文 件 ”|“ 新 建 ”命令 ， 贺 弹出“ 新建 文档 ”对 话 框 ， 人 设置 “名 称 ”为 “旅游 小 程 
序 界面 设计 ”、 “宽度 ” 为 1080 像 素 、“ 高 度 ” 为 1920 像 素 、“ 分 辨 率 ” 为 300 像 素 / 英 寸 、“ 颜 色 模 
式 ” 为 “RGB 颜色 ”、“ 背 景 内 容 ” 为 “白色 ”， 合 单 击 “ 创 建 ” 按 钮 ， 如 图 8-8 所 示 ， 新 建 一 个 空白 
图 像 。 

9 STEP 02 按 Ctrl+O 组 合 键 ， 打 开 “ 状 态 栏 .jpg” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 抱 至 背景 图 像 
编辑 窗口 中 ， 适 当 调整 图 像 的 位 置 ， 效 果 如 图 8-9 所 示 。 


OF 


(Ca) @D 
图 8-8 设置 各 选项 图 8-9 素材 图 像 
9 STEP 03 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 ， 全 设置 “字体 系列 ”为 “方正 细 黑 一 简 
体 ”、“ 字 体 大 小 ”为 14 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -75、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 
为 255 ) ，@ 并 激活 仿 粗 体 图 标 ， 如 图 8-10 所 示 。 
9 STEP 04 在 图 像 编辑 窗口 中 的 适当 位 置 ， 输 入 文字 ， 如 图 8-11 所 示 。 


9.3Ks 国 中 


国立 工 工 
cs 入 只 二 可 
加 设置 


图 8-10 设置 各 选项 图 8-11 给 入 文字 
9 STEP 05 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 “填充 ”为 


色 、“ 描 边 ”为 无 ， 在 图 像 编 辑 窗口 中 绘制 一 个 矩形 形状 ， 如 图 8-12 所 示 。 
9 STEP 06 复制 “和 矩形 1” 图 层 ， 得 到 “ 甜 形 1 拷贝 ”图 层 ， 如 图 8-13 所 示 。 
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eSTEP 07 7 @ 运 当 调整 其 位 置 ， 按 CtrlHT 组 合 键 ， 四 调 出 变换 控制 框 ， 如 图 8-14 所 示 。 
9 STEP 08 适当 调整 图 像 的 大 小 ， 并 按 Enter 键 确认 ， 如 图 8-15 所 示 。 


E33 3 
pai -加 OoTHB 。 
正常 ”不适 明度 : 100% ~ 


负 放 :加 A 只 全 十: 10% ~ 


© 了 图 层 1 i 
中 所 口 9. 哲 日 自 


图 8-13 复制 图 层 
sh OO 
X “去 旅行 


@@ 调 出 变换 控制 框 


图 8-14 调 出 变换 控制 框 图 8-15 ”确认 变换 
9 STEP 09 选取 工具 箱 中 的 横 排 文 字 工具 ， 在 “字符 ”面板 中 ， 设 置 “ 字 体系 列 ” 为 “黑体 ”、“ 字 体 
大 小 ”为 12 点 、“ 颜 色 ” 为 蓝 色 ( RGB 参数 值 分 别 为 0、159、240 ) ， 在 图 像 编 辑 窗口 中 的 适当 位 置 


输入 文字 ， 如 图 8-16 所 示 。 
eSTEP 10 打开 “下 拉 按钮 .psd” 素 材 ， 运 用 移动 工具 将 素材 图 像 拖 遇 至 背景 图 像 编 辑 窗口 中 ， 适 当 调 
整 图 像 的 位 置 ， 效 果 如 图 8-17 所 示 。 


图 8-16 输入 文字 图 8-17 拖 久 图像 
9 STEP 11 选取 工具 箱 中 的 椭圆 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 无 、“ 描 边 ”为 灰色 ( RGB 参数 
值 均 为 160 ) 、“ 描 边 宽 度 ”为 4 像素 ， 在 图 像 编 辑 窗口 中 绘制 一 个 椭圆 ， 效 果 如 图 8-18 所 示 。 
问 
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9 STEP 12 在 人 @ 弹 出 的 “属性 ”面板 中 ，@ 设 置 W 为 38 像 素 、H 为 38 像 素 、X 为 486 像 素 、Y 为 261 像 素 ， 
如 图 8-19 所 示 。 


图 8-18 绘制 椭圆 图 8-19 设置 各 选项 
e@STEP 13 选取 工具 箱 中 的 圆 角 矩 形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 灰色 ( RGB 参数 值 均 为 
160 ) 、“ 描 边 ”为 无 、“ 半 径 ” 为 10 像 素 ， 在 图 像 编辑 窗口 中 绘制 一 个 圆 角 和 矩形 ， 按 Ctrl+T 组 合 键 ， 
调 出 变换 控制 框 ， 适 当 旋 转 后 ， 按 Enter 键 确认 变换 ， 如 图 8-20 所 示 。 
9 STEP 14 选取 工具 箱 中 的 横 排 文 字 工具 ， 在 “字符 ”面板 中 ， 设 置 字体 系列 为 “黑体 ”、 字 体 大 小 为 
12 点 、“ 颜 色 ” 为 灰色 ( RGB 参数 值 均 为 160 ) ， 在 图 像 编辑 窗口 中 的 适当 位 置 输入 文字 ， 如 图 8-21 
所 示 。 


图 8-20 ”确认 变换 图 8-21 输入 文字 
9 STEP 15 按 Ctrl+O 组 合 键 ， 打 开 “ 功 能 菜单 jpg” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 息 至 背景 图 
像 编辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 8-22 所 示 。 
9 STEP 16 新 建 图 层 ， 选 取 工 具 箱 中 的 矩形 选 框 工 具 ， 在 图 像 编辑 窗 口中 绘制 一 个 矩形 选区 ， 如 图 8-23 
所 示 。 


图 8-22 ”添加 功能 菜单 素材 图 8-23 ”绘制 矩形 选区 
e@STEP 17 设置 前 景色 为 浅 灰 色 ( RGB 参数 值 均 为 240 ) ， 按 Alt+Delete 组 合 键 为 选区 填充 前 景色 ， 效 果 
如 图 8-24 所 示 。 
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9 STEP 18 在 选区 内 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “变换 选区 ”命令 ， 如 图 8-25 所 示 。 


oo9969ei9 Se 
(| 时 E= ? 
填充 
图 8-24 填充 前 景色 图 8-25 选择 “变换 选区 ”命令 

9 STEP 19 适当 调整 选区 大 小 ， 按 Enter 键 确认 变换 ， 按 Delete 键 ， 删 除 选区 内 的 图 像 ， 并 取消 选区 ， 效 
果 如 图 8-26 所 示 。 

9 STEP 20 选取 工具 箱 中 的 横 排 文 字 工具 ， 在 “字符 ”面板 中 ， 设 置 “字体 系列 ”为 “黑体 ”、“ 字 体 
大 小 ”为 10 点 、“ 颜 色 ” 为 深 灰 色 ( RGB 参 数值 均 为 31 ) ， 在 图 像 编辑 窗口 中 的 适当 位 置 输入 文字 ， 
如 图 8-27 所 示 。 

O06ee oeee 


游记 旅行 视 游记 旅行 视频 问答 嗣 硝 


看 看 周边 好 玩 的 
删除 
击 


图 8-26 取消 选区 图 8-27 输入 文字 


9 STEP 21 按 Ctrl+O 组 合 键 ， 打开“ 武汉 风景 jpg” 素 材 图 像 ， 如 图 8-28 所 示 。 

9 STEP 22 单 击 “ 图 像 ”|“ 调 整 ”|“ 自 然 饱 和 度 ” 命 令 ，@ 弹 出 “自然 饱和 度 ” 对 话 框 ，@ 设 置 “ 自 
然 饱 和 度 ” 为 50， 合 单 击 “ 确 定 ” 按 钮 ， 如 图 8-29 所 示 。 

9STEP 23 单 击 “图 像 ”|“ 调 整 ” |“ 曲线 ”命令 ， 和 四 弹出 “曲线 ”对 话 框 ，@ 在 曲线 上 单 击 鼠标 
左 键 新 建 一 个 控制 点 ， 合 在 下 方 设置 “输入 ”为 118、“ 输 出 ”为 151， 人 @ 单 击 “ 确 定 ” 按 钮 ， 如 
图 8-30 所 示 。 


自然 泡 和 度 (V): 


(人 确 
取 
饱和 度 (S): 0 
@ 设 置 


图 8-28 素材 图 像 图 8-29 设置 “自然 饱和 度 ” 参 数 
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9 STEP 24 单 击 “ 图 像 ”| “调整”|“ 亮 度 /对 比 度 ” 命 令 ， 人 @ 弹 出 “亮度 /对 比 度 ” 对 话 框 ，@ 设 置 “ 对 
比 度 ” 为 47， 合 单 击 “ 确 定 ”按钮 ， 如 图 8-31 所 示 。 


|@ 弹 出 | 


回 预览 (P) 
图 8-30 设置 各 参数 图 8-31 设置 “对 比 度 ” 参 数值 
9 STEP 25 运用 移动 工具 将 素材 图 像 拖 忠 至 背景 图 像 编辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 8-32 


所 示 。 

9 STEP 26 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 ， 设置“ 字体 系列 ”为 “方正 粗 倩 简 
体 ”、“ 字 体 大 小 ”为 26 点 、“ 颜 色 ” 为 深 灰 色 ( RGB 参数 值 均 为 13 ) ， 在 图 像 编辑 窗口 中 的 适当 位 
置 输入 文字 ， 如 图 8-33 所 示 。 


看 看 周边 好 玩 的 看 看 周边 好 玩 的 


图 8-32 拖 提 图 像 图 8-33 输入 文字 
9 STEP 27 选取 工具 箱 中 的 横 排 文 字 工具 ， 在 “字符 ”面板 中 ， 设 置 “字体 系列 ”为 “方正 细 黑 一 简 
体 ”、“ 字 体 大 小 ”为 18 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 300、“ 颜 色 ” 为 深 灰 色 ( RGB 参数 值 
均 为 13 ) ， 在 图 像 编辑 窗口 中 的 适当 位 置 输入 文字 ， 如 图 8-34 所 示 。 
9 STEP 28 适当 调整 各 图 像 的 位 置 ， 效 果 如 图 8-35 所 示 。 


看 看 周边 好 玩 的 


图 8-34 ”输入 文字 图 8-35 图像 效果 
e@ STEP 29 选取 工具 箱 中 的 圆 角 和 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 灰色 ( RGB 参数 值 均 为 
151 ) 、“ 描 边 ”为 无 、“ 半 径 ” 为 10 像 素 ， 在 图 像 编辑 窗口 中 绘制 一 个 圆 角 矩形， 如 图 8-36 所 示 。 
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9 STEP 30 复制 “ 圆 角 和 矩形 2” 图 层 3 次 ， 并 适当 调整 其 位 置 ， 如 图 8-37 所 示 。 


看 看 周迅 好 玩 玖 


看 看 周 迈 于 玩 丁 


图 8-36 绘制 圆 角 矩形 图 8-37 复制 图 层 
9 STEP 31 按 Ctri+O 组 合 键 ， 打 开 “ 导 航 栏 图 标 .psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 忠 至 背景 
图 像 编 辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 8-38 所 示 。 
9 STEP 32 选取 工具 箱 中 的 横 排 文 字 工具 ， 在 “字符 ”面板 中 ， 设 置 “字体 系列 ”为 “黑体 ”、“ 字 体 
大 小 ”为 10 点 、“ 颜 色 ” 为 深 灰 色 ( RGB 参 数值 均 为 50 ) ， 在 图 像 编 辑 窗口 中 的 适当 位 置 输入 文字 ， 
如 图 8-39 所 示 。 


分 类 我 的 订单 输入 
图 8-38 拖 复 图 像 图 8-39 输入 文字 


8.2.2 ”婚纱 摄影 小 程序 界面 设计 


在 制作 婚纱 摄影 小 程序 界面 时 ， 运 用 两 张 婚纱 照片 来 设计 程序 界面 ， 让 人 一 眼 明 白 页 面 的 经 营 


容 ; 色彩 主要 使 用 各 种 浅 色 来 搭配 ， 营 造 出 浪漫 唯美 的 氛围 。 
本 实例 的 最 终 效果 如 图 8-40 所 示 。 


图 8-40 ”实例 效果 
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素材 \ 第 8 章 \ 婚 纱 摄影 背景 jpg、 婚 纱 人 物 jpg、 婚 纱 文字 .psd、 咨 询 服务 背景 
图 jpg、 婚 纱 文字 2.psd、 导 航 栏 图 标 2.psd 


效果 \ 第 8 章 \ 婚 纱 摄影 小 程序 界面 设计 .psd、 婚 纱 摄影 小 程序 界面 设计 .jpg 


8.2.2 婚纱 摄影 小 程序 界面 设计 .mp4 


9 STEP 01 按 Ctrl+O 组 合 键 ， 打 开 “ 婚 纱 摄影 背景 jpg” 素 材 图 像 ， 如 图 8-41 所 示 。 


© STEP 02 按 Ctrl+O 组 合 键 ， 打 开 “ 婚 纱 人 物 .jpg” 


素材 图 像 ， 如 图 8-42 所 示 。 


图 8-41 素材 图 像 


i 


图 8-42 ”素材 图 像 


9 STEP 03 单 击 “ 选 择 ”|“ 色 彩 范围 ”命令 ，@ 弹 出 “色彩 范围 ”对 话 框 ，@ 设 置 “ 颜 色 容 差 ” 为 52， 


合 在 人 物 的 脸 正 单 击 ， 选 中 相应 范围 内 的 色彩 ， 


如 图 8-43 所 示 ， 单 击 “ 确 定 ”按钮 。 


9 STEP 04 单 击 “ 图 像 ”|“ 调 整 ” |“ 曲线 ”命令 ， 和 @@ 弹 出 “曲线 ”对 话 框 ， 人 在 曲线 上 单 击 鼠 标 左 键 新 


建 一 个 控制 点 ， 在 下 方 全 设置“ 输入 ”为 117、“" 


| 六 由 | 二 一 


图 8-43 选中 相应 范围 内 的 色彩 


ER eet 
选区 预览 图 : 对 话 框 中 有 一 个 选区 预览 图 ， 它 下 面包 含 了 两 个 选项 ， 选 中 : 


输出 ”为 147，@@ 单 击 “确定 ”按钮 ， 如 图 8-44 所 示 。 


问 二老 加 (V) © ip) 
日 下方 图 0 


© EC) 


图 8-44 设置 各 参数 


“选择 范围 ” 单 选 按钮 时 ， 预 览 区 域 的 图 像 中 ， 白 色 代 表 了 被 选择 的 区 域 ， 
黑色 代表 了 未 选择 的 区 域 ， 灰 色 代表 了 部 分 被 选择 的 区 域 ( 带 有 羽化 效果 的 


区 域 ) ; 如 果 选 中 “图 像 ” 


” 单 选 按钮 ， 则 预览 区 会 显示 彩色 的 图 像 。 


”> 选择: 用 来 设置 选区 的 方式 。 选 择 “取样 颜色 ”时 ， 可 将 光标 (光标 呈 儿 状 ) 放 在 文档 窗口 中 
的 图 像 或 “色彩 范围 ”对 话 框 中 的 预览 图 上 单 击 ， 对 颜色 进行 取样 ; 如 果 要 添加 颜色 ， 可 以 选中 

。 “添加 到 取样 ”按钮 受 ， 然 后 在 预览 图 或 者 图 像 上 单 击 ， 即 可 添加 颜色 ;如 果 要 减 去 颜色 ,可 以 
”选中 “从 取样 中 减 去 ”按钮 及 ， 然 后 在 预览 图 或 者 图 像 上 单 击 ， 即 可 减 去 颜色 。 | 
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9 STEP 05 执行 上 述 操作 后 ， 即 可 使 人 物 皮肤 更 加 白 暂 ， 按 Ctrl+D 组 合 键 取消 选区 ， 运 用 移动 工具 将 素 
材 图 像 拖 中 至 背景 图 像 编辑 窗口 中 ， 适 当 调整 图 像 的 大 小 和 位 置 ， 效 果 如 图 8-45 所 示 。 

9 STEP 06 选取 工具 箱 中 的 横 排 文字 工具 ， 人 @ 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 大 标 宋 简 
体 ”、“ 字 体 大 小 ”为 14 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -100、“ 颜 色 ” 为 深 灰 色 ( RGB 参数 值 
均 为 27 ) ，@ 并 激活 仿 粗 体 图 标 ， 如 图 8-46 所 示 。 


DN 


字符 ”8 车 


LE 


美国 英语 


图 8-45 拖 役 图 像 


图 8-46 设置 各 选项 


9 STEP 07 在 图 像 编辑 窗口 中 输入 文字 ， 并 适当 调整 其 位 置 ， 效 果 如 图 8-47 所 示 。 


9 STEP 08 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 


无 、“ 描 边 ” 为 灰色 ( RGB 参数 值 均 为 151 ) 、 
绘制 一 个 矩形 形状 ， 如 图 8-48 所 示 。 


“ 描 边 宽度 ”为 2 像素 ， 在 图 像 编辑 窗口 中 的 适当 位 置 


上 
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图 8-47 输入 文字 图 8- 48 绘制 矩形 
9 STEP 09 选取 工具 箱 中 的 横 排 文 字 工 具 ， 设 置 “字体 系列 ”为 “宋体 ”、“ 字 体 大 小 ”为 6 点 、“ 颜 


色 ” 为 深 灰色 ( RGB 参数 值 均 为 70 ) ， 并 激活 仿 粗 体 图 标 ， 在 图 像 编辑 窗口 中 输入 文字 ， 如 图 8-49 所 示 。 
9 STEP 10 按 Ctrl+O 组 合 键 ， 打开“ 婚纱 文字 .psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 折 至 背景 图 
像 编 辑 窗口 中 ， 适 当 调整 图 像 的 位 置 ， 效 果 如 图 8-50 所 示 。 


9 STEP 11 选取 工具 箱 中 的 横 排 文 字 工 具 ， 设 置 
15.5 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -50、 
并 激活 仿 粗 体 图 标 ， 


字 距 调整 ”为 25、 
所 示 。 


“字体 系列 ”为 “方正 细 黑 一 简体 ”、 
“颜色 ”为 棕色 ( RGB 参 数值 分 别 为 151、 
在 图 像 编辑 窗口 中 输入 文字 ， 如 图 8-51 所 示 。 

9 STEP 12 在 “字符 ”面板 中 设置 “字体 系列 ”为 Khmer UI、 


“字体 大 小 ”为 
115 8290) 
“字体 大 小 ” 


为 12 点 、“ 设 置 所 选 字符 的 


“颜色 ”为 灰色 ( RGB 参数 值 均 为 189 ) ， 在 图 像 编辑 窗口 中 输入 文字 ， 如 图 8-52 
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图 8-50 拖 旬 图 像 
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图 8-51 输入 文字 图 8-52 输入 文字 
9 STEP 13 新 建 图 层 ， 选 取 工 具 箱 中 的 矩形 选 框 工 具 ， 在 图 像 编 辑 窗口 中 绘制 一 个 矩形 选区 ， 为 选区 填 
充 灰 色 ( RGB 参数 值 均 为 239 ) ， 如 图 8-53 所 示 ， 并 取消 选区 。 
e@5STEP 14 按 Ctrl+O 组 合 键 ， 打 开 “ 客 服 中 心 背 景 图 .jpg” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 折 至 
背景 图 像 编辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 8-54 所 示 。 


本 | 
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图 8-53 ”填充 选区 图 8-54 拖 慢 图 像 

9 STEP 15 按 住 Ctrl 键 的 同时 ， 单 击 “ 图 层 3” 图 层 的 图 层 缩 览 图 ， 载 入 选区 ，@ 新 建 一 个 图 层 并 填充 黑 
色 ( RGB 参 数值 均 为 0) ， 四 设置 图 层 的 “不 透明 度 ” 为 30%， 如 图 8-55 所 示 ， 并 取消 选区 。 

9 STEP 16 选取 工具 箱 中 的 圆 角 和 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 浅黄 色 ( RGB 参数 值 分 别 为 
255、251、208 ) 、“ 描 边 ”为 无 、“ 半 径 ” 为 10 像 素 ， 在 图 像 编 辑 窗口 中 绘制 一 个 圆 角 矩形， 并 设 
置 其 “不 透明 度 ”为 65%， 效 果 如 图 8-56 所 示 。 

9 STEP 17 选取 工具 箱 中 的 横 排 文字 工具 ， 设 置 “字体 系列 ”为 “方正 细 黑 一 简体 ”、“ 字 体 大 小 ”为 
13 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -75、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 并 激活 仿 粗 体 


第 8 章 ， 微 信 小 程序 广告 设计 


图 标 ， 在 图 像 编 辑 窗口 中 输入 文字 ， 如 图 8-57 所 示 。 
9 STEP 18 复制 相应 图 层 ， 并 将 其 移动 至 合适 位 置 ， 如 图 8-58 所 示 。 


于 三 - 本 期 推荐 - 
类 四 @OTHB 。 
正常 不 透明度: 30% 
试 E: 图 yw 中 共生 请 8: 104% 
© BM se: 
| 中 
。 I@ 新 建 
OG 和 Oo 
图 8-55 设置 “不 透明 度 ” 参 数 图 8-56 绘制 贺 角 矮 形 
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图 8-57 输入 文字 图 8-58 复制 并 移动 图 层 
9 STEP 19 选取 工具 箱 中 的 圆 角 和 矩形 工具 ， 展 开 “ 属 性 ”面板 ， 设 置 “填充 ”为 蓝 色 ( RGB 参数 值 分 别 
为 207、245、255 ) ; 选取 工具 箱 中 的 横 排 文 字 工具 ， 修 改 文本 内 容 ， 效 果 如 图 8-59 所 示 。 
9 STEP 20 按 Ctrl+O 组 合 键 ， 打 开 “ 婚 纱 文 字 2.psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 电 至 背景 图 
像 编辑 窗口 中 ， 适 当 调整 图 像 的 位 置 ， 效 果 如 图 8-60 所 示 。 


图 8-59 修改 文本 内 容 图 8-60 拖 旬 图 像 

eSTEP 21 选取 工具 箱 中 的 直线 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 粗 细 ” 为 2 
像素 、“ 填 充 ” 为 灰色 ( RGB 参数 值 均 为 195 ) ， 在 图 像 编辑 窗口 中 绘制 一 个 直线 形状 ， 如 图 8-61 所 示 。 
9 STEP 22 按 Ctrl+O 组 合 键 ， 打开 “导航 栏 图 标 2.psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 披 至 背景 


Photoshop 
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图 像 编 辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 8-62 所 示 。 

e@STEP 23 单 击 前 景色 色 块 ，@ 弹 出 “ 拾 色 器 ( 前 景色 ) ”对 话 框 ， 四 设置 RGB 参数 值 分 别 为 233、 
183、189， 和 @ 单 击 “ 确 定 ”按钮 ， 如 图 8-63 所 示 。 

9 STEP 24 选取 工具 箱 中 的 魔 棒 工 具 ， 在 图 像 编 辑 窗口 中 的 适当 位 置 单 击 鼠标 左 键 ， 创 建 选区 ， 并 按 
Alt+Delete 组 合 键 为 选区 填充 前 景色 ， 取 消 选 区 ， 如 图 8-64 所 示 。 


“咨询 服务 - 
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图 8-61 绘制 直线 
弹出 画 | 


口 有 web 新 色 


图 8-63 设置 前 景色 图 8-64 填充 前 景色 

9 STEP 25 选取 工具 箱 中 的 横 排 文字 工具 ， 设 置 “字体 系列 ”为 “方正 细 黑 一 简体 ”、“ 字 体 大 小 ”为 
9 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -25、“ 颜 色 ” 为 深 灰 色 ( RGB 参数 值 均 为 34 ) ， 并 激活 仿 粗 体 

图 标 ， 在 图 像 编辑 窗口 中 输入 文字 ， 如 图 8-65 所 示 。 

e@STEP 26 选中 相应 文字 ， 并 修改 颜色 为 粉色 ( RGB 参数 值 分 别 为 33、183、189 ) ， 按 Ctrl+Enter 组 合 
键 确 认输 入 ， 如 图 8-66 所 示 。 


“咨询 服务 5 


首页 最 新 客 曲 样本 欣赏 关于 我 们 县 新 客 弄 样 照 欣赏 关于 我 们 
图 8-65 输入 文字 图 8-66 ”确认 输入 


8.2.3 ”食品 小 程序 界面 设计 


在 制作 食品 小 程序 界面 时 ， 运 用 浅 粉色 作为 背景 色 ， 各 活动 区 域 的 背景 
色 ， 整 体 色彩 非常 鲜艳 明快 。 
本 实例 的 最 终 效果 如 图 8-67 所 示 。 


色 则 是 采用 各 种 鲜亮 的 颜 


X 。 蓝 欣 铺子 旗舰 店 
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图 8-67 ”实例 效果 


素材 文件 素材 \ 第 8 章 \ 食 品 背 景 jpg、 满 减 活动 .psd、 满 减 活动 主体 .psd、 横 幅 .jpg、 商 
品 展示 jpg、 食 品 文字 .psd 


效果 文件 “| 效果 \ 第 8 章 \ 食 品 小 程序 界面 设计 .psd、 食 品 小 程序 界面 设计 .jpg 
视频 文件 “| 8.2.3 食 品 小 程序 界面 设计 .mp4 
9 STEP 01 按 Ctrl+O 组 合 键 ， 打 开 “ 食 品 背 景 jpg” 素 材 图 像 ， 如 图 8-68 所 示 。 


9 STEP 02 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 ， 设 置 “ 字 体系 列 ” 为 “方正 细 黑 一 简 
体 ”、“ 字 体 大 小 ”为 14 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -50、“ 颜 色 ” 为 黑色 ( RGB 参数 值 均 
为 0 ) ， 并 激活 仿 粗 体 图 标 ， 在 图 像 编辑 窗口 中 输入 文字 ， 如 图 8-69 所 示 。 


_ _ X ， 蓝 欣 铺子 旗舰 店 
症 加 


店铺 精 选 全 部 商品 

-i 

图 8-68 ”素材 图 像 图 8-69 输入 文字 
9 STEP 03 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 ， 设 置 “字体 系列 ”为 “方正 流行 体 简 
体 ”、“ 字 体 大 小 ”为 10 点 、“ 行 距 ” 为 12 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 735、“ 颜 色 ” 为 红色 
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(RGB 参数 值 分 别 为 242、3、3 ) ， 在 “段落 ”面板 中 单 击 “居中 对 齐 ” 按 钮 ， 在 图 像 编 辑 窗口 中 的 
适当 位 置 输入 文字 ， 如 图 8-70 所 示 。 
eSTEP 04 选中 相应 文字 ， 设 置 “字体 大 小 ”为 15 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -530， 按 
Ctrl+Enter 组 合 键 确认 输入 ， 如 图 8-71 所 示 。 


X 。 蓝 欣 铺子 旗舰 店 站 X ” 蓝 欣 铺子 旗舰 店 站 
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© 134 全 134 
店铺 精 选 全 部 商品 店铺 精 选 全 部 商品 
输入 设置 样式 


图 8-70 输入 文字 图 8-71 确认 输入 
e@STEP 05 选取 工具 箱 中 的 圆 角 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 填 
充 ” 为 浅 灰 色 ( RGB 参数 值 均 为 234 ) 、“ 描 边 ” 为 无 、“ 半 径 ”为 40 像 素 ， 在 图 像 编辑 窗口 中 的 适 
当 位 置 绘制 一 个 圆 角 矩形 形状 ， 如 图 8-72 所 示 。 
9 STEP 06 选取 工具 箱 中 的 椭圆 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 无 、“ 描 边 ”为 灰色 ( RGB 参数 
值 均 为 160 ) 、“ 描 边 宽度 ”为 4 像素 ， 在 图 像 编辑 窗口 中 绘制 一 个 椭圆 ， 效 果 如 图 8-73 所 示 。 


X ， 蓝 欣 铺子 旗舰 店 
了 X ， 蓝 欣 铺子 旗舰 店 
9 134 
和 央 i 葵 摧 铺子 〇 < 了 [给 制 | 
[mm] 
bd 
店铺 精 选 
图 8-72 ”绘制 圆 角 矩 形 图 8-73 绘制 椭圆 


9e STEP 07 选取 工具 箱 中 的 圆 角 和 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 灰色 ( RGB 参数 值 均 为 
160 ) ， 在 图 像 编 辑 窗口 中 绘制 一 个 圆 角 和 矩形， 并 适当 旋转 ， 效 果 如 图 8-74 所 示 。 

9 STEP 08 选取 工具 箱 中 的 横 排 文 字 工 具 ， 在 “字符 ”面板 中 ， 设 置 “字体 系列 ”为 “方正 细 黑 一 简 
体 ”、“ 字 体 大 小 ”为 10 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -25、“ 颜 色 ” 为 灰色 ( RGB 参数 值 均 
为 160 ) ， 并 激活 仿 粗 体 图 标 ， 在 图 像 编 辑 窗口 中 的 适当 位 置 输入 文字 ， 效 果 如 图 8-75 所 示 。 

e@STEP 09 单 击 “ 图 层 ”面板 底部 的 “创建 新 图 层 ” 按 钮 ， 新 建 图 层 ， 选 取 工 具 箱 中 的 矩形 选 框 工具 ， 
在 图 像 编 辑 窗口 中 绘制 一 个 矩形 选区 ， 如 图 8-76 所 示 。 

9 STEP 10 设置 前 景色 为 粉色 ( RGB 参 数值 分 别 为 255、202、196 ) ， 按 Alt+Delete 组 合 键 为 选区 填充 前 
景色 ， 按 Ctrl+D 组 合 键 ， 取 消 选区 ， 效 果 如 图 8-77 所 示 。 


蓝 欣 铺子 旗 般 
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[4 牛 铺 精 先 全 部 商品 
欣 铺 子 
nDxinpuzi 
(| 绘制 并 旋转 
[aa 
店铺 精 选 
图 8-74 ”绘制 圆 角 和 矩形 图 8-75 ”输入 文字 


| 坊 家 指点 ) > 


”> 按 Alt 键 ， 可 创建 以 起 点 为 中 


心 的 矩形 选区 。 


| 按 ShifttM 组 合 键 ， 可 快速 选择 矩形 选 框 工具 。 
> 按 Shif 键 ， 可 创建 正方 形 选区 。 


”> 按 AlttShif 组 合 键 ， 可 创建 以 起 点 为 中 心 的 正方 形 选 区 。 
eee 


9 STEP 11 按 Ctrl+O 组 合 键 ， 打 开 “ 满 减 活动 .psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 披 至 背景 图 


像 编 辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 8-78 所 示 。 
9 STEP 12 选取 工具 箱 中 的 横 排 文字 工具 ， 设置“ 字体 系列 ”为 “黑体 ”、 


置 所 选 字符 的 字 距 调整 ”为 50、 


| 绘制 | X 。 亚 欣 销 子 旗舰 店 
A 2 
上 9 134 本 134 
填充 
a we 二 三 ee 2 
图 8-76 绘制 矩形 选区 图 8-77 填充 前 景色 
与 创建 矩形 选 框 有 关 的 技巧 如 下 。 


“字体 大 小 ”为 21 点 、 


“ 设 
“颜色 ”为 红色 ( RGB 参 数值 分 别 为 221、32、58 ) ， 并 激活 仿 粗 体 
图 标 ， 在 图 像 编辑 窗口 中 输入 文字 ， 如 图 8-79 所 示 。 


9 STEP 13 选择 “199” 与 “100” 数 字 ,， 设置 “字体 系列 ”为 “Impact”， 按 Ctrl+Enter 组 合 键 确 认输 


入 ， 如 图 8-80 所 示 。 


9 STEP 14 按 Ctrl+O 组 合 键 ， 打 开 “ 满 减 活动 主体 psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 卸 至 背 
景 图 像 编辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 8-81 所 示 。 


Photoshop 


新 媒体 广告 设计 
利克 后 引 卸 氏 | 站 
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店铺 精 先 全 部 商品 店铺 精 先 全 部 商品 


图 8-78 拖 旬 图像 图 8-79 


第 的 本 寻 【CE 革 必 站 了 本 
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店铺 情 和 全 部 商品 店铺 稍 迁 


199 减 100 5 折 抢 目 199 减 100 
a 大 箱 罕 食 


[ 确认 输入 | 


se 


所 要 下 


图 8-80 ”确认 输入 图 8-81 拖 慢 图像 


9 STEP 15 选取 工具 箱 中 的 椭圆 选 框 工具 ， 在 工具 属性 栏 中 设置 “羽化 ”为 15 像 素 ， 将 光标 移 至 图 像 纺 


辑 窗 口中 ， 在 适当 位 置 绘制 一 个 椭圆 选区 ， 如 图 8-82 所 示 。 


9 STEP 16 在 “图 层 3” 图 层 下 方 新 建 一 个 图 层 ， 设 置 前 景色 为 深 绿色 ( RGB 参 数值 分 别 为 64、85、 


21 ) ， 如 图 8-83 所 示 。 


99 元 一 大 箱 零 食 | EE 
| EE 


图 8-82 ”绘制 椭圆 选区 图 8-83 设置 前 景色 参数 


9 STEP 17 按 Alt+Delete 组 合 键 为 选区 填充 前 景色 ， 按 Ctrl+D 组 合 键 ， 取 消 选 区 ， 效 果 如 图 8-84 所 示 。 


9 STEP 18 按 Ctrl+O 组 合 键 ， 打 开 “ 横 幅 -jpg” 素 材 图 像 ， 运 用 移动 了 


辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 8-85 所 示 。 


[ 具 将 素材 图 像 拖 昂 至 背景 图 像 纺 


9 STEP 19 按 Ctrl+O 组 合 键 ， 打开“ 商品 展示 jpg” 素材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 折 至 背景 图 


像 编辑 窗口 中 ， 适 当 调整 图 像 的 位 置 ， 效 果 如 图 8-86 所 示 。 
9 STEP 20 设置 前 景色 为 玫 红 色 ( RGB 参 数值 分 别 为 245、41、94 ) ， 
在 图 像 编辑 窗口 中 绘制 一 个 矩形 选区 ， 如 图 8-87 所 示 。 


选取 工具 箱 中 的 矩形 选 框 工 具 ， 
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199 藉 100 | ES | 


99 元 一 大 第 零食 prs 
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9 元 一 大 箱 备 食 发 现 更 多 新 于 于 


会 已 色 会 已 及 
首页 购物 车 我 的 首页 购物 车 我 的 
图 8-86 ” 拖 慢 图 像 图 8-87 绘制 矩形 选区 


9 STEP 21 展开 “图 层 ” 面 板 ， 人 @ 单 击 “ 面 板 ” 底 部 的 “创建 新 图 层 ” 按 钮 ， 全 新 建 一 个 图 层 ， 如 
图 8-88 所 示 。 


[ED 在 Photoshop 中 新 建 图 层 的 方式 有 很 多 ， 以 下 列举 了 两 种 常用 的 方法 。 : 
一 一 一 一 > 快捷 键 : 按 ShiftrCtrlHN 组 合 键 ， 弹 出 “新 建 图 层 ” 对 话 框 ， 单 击 “ 确 定 ” 接 


: 钮 ， Wiseer 
”> 命令 : 单 击 “ 图 层 " | “新 建 "|“ 图 层 ” 命 令 ， 弹 出 “新 建 图 层 ”对 话 框 ， 单 击 “ 确 定 " 相 


钮 ， 即 可 新 建 图 层 。 


9 STEP 22 选取 工具 箱 中 的 多 边 形 套 索 工具 ， 在 工具 属性 栏 中 单 击 “从 选区 减 去 ”按钮 ， 在 图 像 编 辑 窗 
口中 绘制 一 个 三 角形 ， 减 去 部 分 选区 ， 如 图 8-89 所 示 。 


f Ea 
到 到 镇 店 之 
pai vmeorna® EE 和 
正常 ~ 不 透明度: 100% ~ 


误 E: 图 yw 中 世 全 填充: 10% ~ 


图 8-88 新建 图 层 图 8-89 ” 减 去 部 分 选区 
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9 STEP 23 按 Alt+Delete 组 合 键 为 选区 填充 前 景色 ， 按 Ctrl+D 组 合 键 ， 取 消 选区 ， 效 果 如 图 8-90 
所 示 。 

@STEP 24 选取 工具 箱 中 的 横 排 文 字 工具 ， 设 置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 10 点 、“ 设 
置 所 选 字符 的 字 距 调整 ”为 -50、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 并 激活 仿 粗 体 图 标 ， 在 图 
像 编辑 窗口 中 输入 文字 ， 如 图 8-91 所 示 。 


会 已 久 会 已 久 
首页 购物 车 我 的 首页 购物 车 我 的 
图 8-90 填充 前 景色 图 8-91 输入 文字 


9 STEP 25 双击 文字 图 层 ， 打 开 “ 图 层 样式 ”对 话 框 ， 选 中 “投影 ” 复 选 框 ， 设 置 “不 透明 度 ” 为 
50%、 “距离 ”为 3 像素 、“ 扩 展 ” 为 0、“ 大 小 ”为 5 像素 ， 单 击 “ 确 定 ”按钮 ， 即 可 为 文字 添加 “ 投 
影 ” 图 层 样式 ， 如 图 8-92 所 示 。 

9 STEP 26 按 Ctri+O 组 合 键 ， 打 开 “ 食 品 文字 .psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 中 至 背景 图 
像 编辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 8-93 所 示 。 


网 生 人 夸克 
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坚果 贵族 ， 回 号 无穷 的 口感 ! 


促销 价 尘 3839.9 
会 已 人 会 已 包 
首页 购物 车 我 的 首页 购物 车 我 的 
图 8-92 添加 “投影 ”图 层 样式 图 8-93 ” 拖 奥 图 像 


9 STEP 27 展开 路 径 面板 ， 在 其 中 选择 “路 径 1” 路 径 ， 并 单 击 面板 下 方 的 “将 路 径 作 为 选区 载 入 ” 
按钮 ， 选 取 工 具 箱 中 的 渐变 工具 ， 单 击 “ 点 按 可 编辑 渐变 ”按钮 ， 和 加 弹出 “渐变 编辑 器 ”对 话 框 ， 
四 分 别 设置 两 个 色 块 的 RGB 参数 值 为 : 248、40、149，232、52、115， 合 单 击 “ 确 定 ”按钮 ， 
如 图 8-94 所 示 。 

e@STEP 28 在 “图 层 ” 面 板 中 新 建 一 个 图 层 ， 由 下 至 上 为 选区 填充 线性 渐变 ， 并 按 Ctri+D 组 合 键 ， 取 消 
选区 ， 如 图 8-95 所 示 。 

9 STEP 29 选中 “新 货 ”文字 图 层 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “拷贝 图 层 样式 ”命令 ， 
并 粘贴 在 “图 层 8” 图 层 上 ， 为 图 像 添 加 “投影 ”图 层 样式 ， 如 图 8-96 所 示 。 
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9 STEP 30 选取 工具 箱 中 的 横 排 文字 工具 ， 设 置 “ 字 体系 列 ” 为 “黑体 ”、“ 字 体 大 小 ”为 11 点 、“ 设 
置 所 选 字符 的 字 距 调整 ”为 -100、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 在 图 像 编辑 窗口 中 输入 
文字 ， 效 果 如 图 8-97 所 示 。 
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购物 车 我 的 
图 8-96 添加 “投影 ”图 层 样式 图 8-97 输入 文字 


截至 2016 年 10 月 底 ， 今 日 头条 激活 用 户 数 已 经 超过 6 亿 ， 月 活跃 用 户 数 超过 
1.4 亿 ,日 活跃 用 户 数 超过 6600 万 。 由 此 可 见 , 今日 头条 已 经 成 为 新 媒体 中 的 一 
个 重要 平台 ， 商 家 可 以 适当 运用 今日 头条 来 做 营销 


企业 头像 是 品牌 象征 今日 头条 头像 设计 
每 日 更 新 提高 点 击 率 主页 横幅 广告 设计 
善于 利用 热门 头条 事件 图 文 推送 广告 封面 设计 
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Te me ee QQ 9.0 全 新 体验 开启 : 界面 
全 变 了 


合肥 有 六 七 十 万 ， 是 买房 还 是 理财 
好 ? 


卫衣 期 准备 : 今日 头条 新 媒体 设计 要 点 


今日 头条 的 特色 在 于 ， 它 直接 通过 系统 来 向 用 户 推荐 有 价值 的 、 
即使 没有 粉丝 ， 只 要 不 断 发 表 干货 文章 或 视频 ， 


绍 今日 头条 新 媒体 设计 的 要 点 。 


9.1.1 企业 头像 是 品牌 象征 


头像 就 等 于 辨认 一 个 用 户 的 标准 ， 有 时 甚至 比 用 户 名 还 重要 ， 因 为 眼睛 一 般 是 先 看 图 ， 而 不 是 看 


文字 。 所 以 ， 一 个 有 特色 、 


“支付 宝 ” 的 头条 号 ， 它 职 用户 各 中 的 -个 字 ， 将 头像 与 名 字 结 合 


立马 联想 到 名 字 


支付 宝 EEB 


头 天 认证 “支付 宝 官方 帐号 


就 是 你 然 的 那个 支付 宝 


陆 辟 看 来 的 ， 还 好 我 大 头条 没 于 么 多 戏 精 碘 下 班 


个 性 化 的 信息 。 根 据 这 一 特点 ， 


也 可 以 快速 积累 粉丝 并 实现 营销 。 本 节 主 要 向 读者 介 


吸引 人 的 注意 力 的 头像 ， 可 以 给 企业 


' 带 来 更 多 的 关注 。 如 图 9-1 所 示 为 


视频 。 问答 


头条 号 头像 的 照片 ， 尺 十 
清晰 程度 ， 如 图 9-1 所 示 的 “ 支 


头像 的 方法 。 


| 图 9-1 “支付 宝 ” 的 头条 号 


比例 为 200 像 素 X200 像 素 左右 。 虽 然 图 片 尺 寸 较 小 ， 但 还 是 要 注意 图 像 的 
付 宝 ”的 头像 大 图 就 未 能 达到 清晰 的 标准 。 下 面 详细 介绍 一 下 设置 头条 号 


La 


9 STEP 01 打开 今日 头条 ，@@ 刘 


头像 ， 如 图 9-3 所 示 。 


9 STEP 02 进入 “个 人 主页 ”界面 ，@ 单 击 头像 ， 如 图 9-4 所 示 ; 四 进入 “编辑 资料 ”界面 ，@@ 再 次 单 


击 头像 ， 如 图 9-5 所 示 。 


ee STEP 03 弹出 相应 对 话 框 ， 
以 单 击 “ 从 相册 选择 ”按钮 ， 


示 ， 按 提示 操作 完成 即 可 。 


击 左 上 方 的 头像 ， 如 图 9-2 所 示 ; 进入 “个 人 信息 ”界面 ， 全 再 次 单 击 


巴 来， 可 以 让 人 看 到 头像 的 同时 ， 


户 可 以 @ 单 击 “ 拍 照 ”按钮 ， 直 接 拍 摄 照片 完成 头像 的 设置 ，@ 还 可 


， 固 选择 需要 的 照片 ， 如 图 9-7 所 


如 图 9-6 所 示 ; 进入 “照片 选择 ”界面 
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年 轻 人 第 一 全 车 就 选 这 3 款 , 不 到 5 万 就 开 
走 ,配置 颜 什 都 不错 


训导 人 
我 要 您 料 
用 户 反馈 
和 统计 
图 9-2 单 击 头像 图 9-3 单 击 头像 图 9-4 单 击 头像 
@ 进 入 > aaa 
头像 GE 
用 户 名 
让 
加 单 击 
4 
地 区 . 


图 9-5 单 击 头像 图 9-6 单 击 “ 从 相册 选择 ”按钮 


re RE 
| 管家 指点 ) 。 同时 需要 注意 的 还 有 一点 ， 在 设置 头条 号 名 黎 时 ， 要 使 用 中 文 简体 ， 尽 量 不 要 
”使 用 英文 、 繁 体 中 文 、 符 号 等 ， 否 则 会 很 难 通过 审核 。 


9.1.2 每 日 更 新 提高 点 击 率 
经 常 发 文 ， 保 持 活跃 很 重要 ， 如 果 一 个 企业 可 以 经 常 发 布 文章 ， 可 以 让 自己 更 多 地 出 现在 用 户 的 


移动 端 界面 ， 并 且 真 的 有 干货 技巧 的 话 ， 就 可 以 吸引 更 多 的 人 成 为 粉丝 。 
下 面 介绍 如 何在 头条 号 中 发 布 文章 ， 发 布 文章 的 方式 有 两 种 。 
1. 主 界面 “发 布 ”按钮 
9 STEP 01 打开 今日 头条 ，@ 单 击 界面 下 方 的 “发 布 ” 按 钮 ， 如 图 9-8 所 示 ; 全 界面 底部 会 弹出 相应 对 
话 框 ， 全 单 击 “ 图 片 ”按钮 ， 如 图 9-9 所 示 。 


一 一 发 布 文章 时 ， 可 以 选择 自己 擅长 的 方式 。 如 果 文章 写 得 好 ， 可 以 多 发 布 文章 ， | 
| 专家 指点 ) 不 过 5 文章 时 建议 村 一 些 田 片 ， 大 长 的 文字 会 让 用 户 大 到 六 伴 ， 如 果 吉 区 折 视频。 
”也 可 以 音 击 “视频 ”按钮 ， 选 择 需要 的 视频 来 发 布 ， 视频 比 图 片 、 文 字 更 有 冲击 力 ， 但 是 制作 视 
。 频 的 成 本 也 要 高 于 文字 与 图 片 。 


图 9-8 单 击 “ 发 布 ”按钮 图 9-9 单 击 “图 片 ”按钮 

9 STEP 02 加 进入 “图 片 相 册 ” 界 面 ， 用 户 可 以 @ 单 击 “ 拍 摄 照片 ”按钮 ， 直 接 拍摄 照片 ，@@ 也 可 以 选 
择 相册 中 已 有 的 照片 ， 如 图 9-10 所 示 ; 进入 “文章 编辑 ”界面 ， 人 @ 输 入 文章 ， 全 单 击 “ 发 布 ” 按 钮 ， 
如 图 9-11 所 示 ， 待 审核 完成 后 ， 文 章 就 能 发 布 了 。 


图 9-10 选择 照片 而 单 击 "发布 按钮 
2. 作品 管理 界面 中 的 “发 布 ”按钮 
eSTEP 01 进入 “个 人 信息 ”界面 ， 人 @ 单 击 “ 作 品 管理 ”按钮 ， 如 图 9-12 所 示 ; 进入 “作品 管理 ” 界 
面 ， 人 @ 单 击 右 上 角 的 “发 布 ” 图 标 媳 ， 如 图 9-13 所 示 。 


手机 报头 后 基数 程 | 1 分 钟 , 孝 
你 怎么 修 出 大 病 全 照片! 


图 9-12 单 走 “作品 管理 ” 按 包 -13 单 击 “ 发 布 ”图 标 
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9 STEP 02 进入 “撰写 文章 ”界面 ， 人 @ 输 入 需要 发 布 的 文章 ， 如 图 9-14 所 示 ; 如果 需要 插入 图 片 ， 人 @@ 可 
以 单 击 下 方 的 四 按钮 ， 合 按 提示 插入 图 片 ，@ 单 击 “ 发 布 ”按钮 ， 如 图 9-15 所 示 ， 待 审核 完成 后 ， 文 
章 就 能 发 布 了 。 


< EE Er < 要 号 文 章 证 
“配角 "和 “ 黄 时 ”分 别 是 什么 了 、 “配角 ”和 “前 昌 "分别 是 什么 ? 

揪 量 中 的 对 象 就 相当 于 是 果 视 居中 的 “ 沉 y 

员 ” ,作为 一 名 括 及 者 ,我们 得 要 做 的 就 是 @ 单 击 | 


过 所 彩 对 钊 和 有 有 玉 的 安 振 ， 更 于 汉 表现 各 避 主 
是 构 姓 个 人 认为 ， 当 我 们 一 兴起 手机 摄影 时 ， 
心中 全 要 有 主体 和 次 体 的 雪 排 和 存在 


“ 红 花 还 需 委 叶 宰 ” 着 面 中 的 主体 对 象 是 说 


OO 栓 入 [一 3 asimsssnzsir, ensTe 
影视 剧 中 的 “主角 ”- 


加 插入 


出 体 作为 次 要 元 系 ， 起 到 突出 与 烘托 主体 的 作 
用 , 量 角 它 担当 的 是 “配角 ”， 但 他 是 不 可 或 
后 的 。 因 为 只 有 在 它 的 宰 托 下 画面 才能 于 加 相 
. 


回 A+ 仿 加 A + 外 


图 9-14 输入 文章 图 9-15 单 击 “ 发 布 ” 按钮 

| 单 击 右 下 角 的 谷 图 标 ， 会 弹出 相应 对 话 框 ， 如 图 9-16 所 示 。 如 果 文章 是 原创 的 
二 话 ， 可 以 单 击 “ 未 声明 原创 ”按钮 ， 按 提示 操作 ， 标 明文 章 为 原创 ， 如 图 9-17 所 示 。 : 
. 村 : 

声明 原创 Er 声明 原创 【aesw | 

广告 选项 不 投放 广告 广告 选项 不 投放 广告 

保存 草稿 保存 草稿 

图 9-16 未 声明 原创 图 9-17 已 声明 原创 


9.1.3 ”善于 利用 热门 头条 事件 


借 势 是 一 种 常用 的 内 容 写 作 手 法 ， 一 般 都 是 在 内 容 标题 上 借助 社会 上 一 些 事实 热点 、 新 闻 的 相关 
词汇 来 给 内 容 造 势 ， 增 加 单 击 量 。 例 如 ， 在 电影 《 捉 妖 记 》 热 映 之 际 ， 配 合 电 影 宣传 的 “ 胡 巴 公仔 ” 
刚 推出 便 火爆 热 销 。 

事实 热点 拥有 一 大 批 关注 者 ， 而 且 传播 的 范围 也 会 非常 广 ， 微 信 公 众 号 、APP 内 容 的 标题 借助 这 
些 热点 就 可 以 让 读者 轻易 地 搜索 到 该 篇 内 容 ， 从 而 吸引 读者 去 阅读 。 如 果 企业 所 写 的 营销 主题 和 名 人 
能 搭 上 关系 的 话 ， 就 能 借 着 名 人 的 气势 ， 进 行 一 场 明 星 效应 风暴 。 

但 是 ， 新 媒体 运营 者 在 采用 借 势 式 标题 的 时 候 需 


要 注意 热点 的 时 效 性 ， 要 在 人 们 对 这 一 热点 关注 度 最 | — 
时 或 者 最 高 的 时 候 将 其 加 入 到 自己 的 内 容 标题 中 去 ， | 吃 ” 呈 当当 生动 人 从 构图 ， 部 作 如 条 拍 册 
这 样 才能 达到 最 好 的 借 势 效果 。 不 可 等 到 热点 的 大 势 | oo 


过 去 了 再 推送 这 种 借 势 式 标题 的 内 容 ， 这 样 收获 的 效 | 加 ss sw， 


二 于 还 了 一 个 中 国生 全 二 外 大 清二 钊 委 所 的 下 可 .由 串 节 灾 划 志 画面 入 四 ， 让 观 吕 去 和 


果 不 佳 。 如 图 9-18 所 示 为 借 势 式 标题 的 案例 分 享 。 Se, ee 
不 管 是 实时 热点 事件 还 是 假期 节日 事件 ， 都 可 以 A 
对 运营 者 的 营销 产生 不 小 的 影响 。 因 此 ， 运 营 者 要 利 ,BRET He Mena, essa. 
好 这 一 事件 来 进行 新 媒体 的 营销 。 图 9-18 ” 借 势 式 标题 案例 分 享 


1. 实时 热点 事件 

借助 热门 头条 事件 来 布局 ， 围 绕 热门 话题 、 热 点 新 闻 、 热 点 事件 ， 以 评论 、 追 踪 观 察 、 揭 秘 、 观 
点 整理 、 相 关 资 料 等 方式 运营 新 媒体 。 

在 利用 热门 头条 事件 运营 时 ， 应 该 从 以 下 几 个 方面 着 手 ， 如 图 9-19 所 示 。 


图 9-19 追踪 新 闻 热 点 制造 微 信 内 容 

如 图 9-20 所 示 ， 支 付 宝 免费 送 红 包 引 发 了 人 们 的 热情 ， 很 多 人 根据 此 热点 事件 撰写 了 多 篇 文章 。 
e 

St Wp ,1 A et 支付 宝 如 何 领 到 大 面额 的 红 


包 ,这 里 有 几 个 可 以 尝试 的 方 
法 


?| js= = 


前 所 时 间 支 付 宝 推 出 了 免费 领 江 亿 中 改动 红 


支付 宝 大 额 红 包 教 你 每 天 如 何 领取 大 额 
红包 


包 的 活动 ， 根 多 人 人 也 领 到 了 好 多 个 红包 , 不 


为 什么 我 领取 支付 宝 红包 只 有 几 毛 , 别 少 人 的 她 自己 领 双 的 红包 小 ， 通常 只 有 几 毛 
人 却 扫 了 一 套房 ? 其 至 几 分 


| Ea < smn 


委 出 10 亿 
包 ， 大 到 
你 领 了 多 少 ? 


We /Si or 
图 9- 20 “热点 事件 案例 分 享 


2. 假期 节日 事件 
对 人 们 来 说 ， 节 假日 一 直 是 人 们 比较 期 盼 的 ， 因 为 无 论 是 从 哪 方 面 来 说 ， 它 们 都 有 着 “ 利 ” 的 一 


方面 。 于 工作 而 言 ， 节 假日 意味 着 “休息 ”和 “放假 ”; 于 生活 而 言 ， 节 假日 意味 着 “团聚 ”和 “ 优 
惠 ”。 如 图 9-21 所 示 为 一 些 头 条 号 结合 节假日 进行 的 事件 营销 。 


< 
关 ; 浸 推荐 热点 视频 长 沙 电影 “十 草莓 圣 诈 老 人 、 圣 诈 雪 人 
不 好 意思 ! 从 100 到 1 万 元 的 至 证 礼物 我 
们 已 经 帮 你 选 好 了 竺 一， [== | 
人 
分 类 : 圣 误 节 
作者 : 有 2 了 


“ 妹 ” 食 过 引 来 闭 ， 边 吃 边 玩 的 打 
开 方 式 你 不 能 错过 1 


:a 
上 人 


主 诈 节 马上 到 了 ， 这 样 挑选 ， 送 给 女 朋 
友 不 一 样 的 三 


创建 时 间 : 2014-12-14 13:07:44 


7 给 王 Or 


图 9-21 节假日 事件 案例 分 享 
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新 媒体 广告 设计 
本 | 案例 实战 : 今日 头条 广告 设计 
今日 头条 是 一 款 基 于 数据 挖掘 的 推荐 引擎 产品 ， 它 将 人 与 信息 直接 连接 了 起 来 ， 成 长 速度 令 人 为 


之 叹服 。 所 以 设计 出 一 个 美观 实用 的 头条 号 界面 ， 是 很 重要 的 。 本 节 主 要 以 今日 头条 头像 、 主 页 横幅 
广告 和 图 文 推送 广告 封面 3 个 广告 位 来 做 案例 分 析 。 


9.2.1 今日 头条 头像 设计 


在 制作 今日 头条 头像 时 ， 先 绘制 出 一 个 等 边 三 角形 ， 用 多 边 形 套 索 工具 选中 部 分 图 像 加 深 颜 
再 运用 重复 变换 制作 出 头像 主体 ， 最 后 加 上 适当 的 文字 即 可 完成 设计 。 
本 实例 的 最 终 效果 如 图 9-22 所 示 。 


三 


究 华 园 ED 
、 芋头 各 号 启 普 不 创作 才 
格 华 司 :快乐 ,标注 ,好 居 所 1 


动态 。 文章 。 视频 


小 高 层 一 可 院 为 什么 费 了 


夫 铝 ， 裕 华 园 


好 ? 


合肥 有 六 七 十 万 ,是 买房 还 是 理财 "| 


图 9-22 ”实例 效果 


素材 文件 | 素材 \ 第 9 章 \ 标 志 .psd、 今 日 头条 界面 1jpg 
效果 文件 | 效果 \ 第 9 章 \ 今 日 头条 头像 设计 .psd、 今 日 头条 头像 设计 .jpg 


视频 文件 | 9.2.1 今日 头条 头像 设计 .mp4 


9 STEP 01 按 Ctrl+N 组 合 键 ，@ 弹 出 “新 建文 档 ” 对 话 框 ， 全 设置“ 名称 ”为 “今日 头条 头像 设计 ”、 
“宽度 ”为 1400 像 素 、“ 高 度 ” 为 1400 像 素 、“ 分 辨 率 ” 为 300 像 素 /英寸 、“ 颜 色 模 式 ” 为 “RGB 颜 
色 ”、“ 背 景 内 容 ” 为 “白色 ”， 合 单 击 “创建 ”按钮 ， 如 图 9-23 所 示 ， 新 建 一 个 空白 图 像 。 

@ STEP 02 设置 前 景色 为 深 棕色 ( RGB 参数 值 分 别 为 106、57、6 ) ，@ 新 建 一 个 图 层 并 @ 填 充 前 景色 ， 
如 图 9-24 所 示 。 

9 STEP 03 选取 工具 箱 中 的 多 边 形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 填 充 ” 为 
黄色 ( RGB 参 数值 分 别 为 255、224、129 ) 、“ 边 ”为 3， 绘 制 一 个 三 角形 形状 ， 效 果 如 图 9-25 所 示 。 

9 STEP 04 在 “图 层 ” 面 板 中 选择 “多 边 形 1” 形 状 图 层 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 
“ 顶 格 化 图 层 ” 选 项 ， 如 图 9-26 所 示 ， 将 图 层 栅 格 化 。 


做 
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图 9-24 填充 前 景色 


ES 
Pa ~ 加 
正常 ~ 
久 : 轩 w 中 村 


5 是 
© 贺 图 层 1 = = 


“Dw a 所 


图 9-25 ”绘制 三 角形 图 9-26 选择 “ - 袖 格 化 图 层 ” 命令 
9 STEP 05 选取 工具 箱 中 的 多 边 形 套 索 工具 ， 在 三 角形 内 部 绘制 出 一 个 三 角形 选区 ， 如 图 9-27 所 示 。 
9 STEP 06 选取 工具 箱 中 的 加 深 工 具 ， 在 工具 属性 栏 中 设置 “大 小 ”为 150 像 素 、“ 硬 度 ” 为 0、“ 范 
围 ” 为 “中 间 调 ”、“ 了 曝光 度 ” 为 50%， 在 选区 内 适当 位 置 涂抹 ， 加 深部 分 图 像 的 颜色 并 取消 选区 
效果 如 图 9-28 所 示 。 
9 STEP 07 用 与 上 同样 的 方法 ， 绘 制 出 另外 两 个 三 角形 ， 并 适当 加 深部 分 图 像 的 颜色 ， 使 三 角形 变 得 立 
体 起 来 ， 效 果 如 图 9-29 所 示 。 


多 


图 9-27 绘制 三 角形 选区 图 9-28 ”加 深 颜 色 并 取消 选区 图 9-29 ”图像 效 果 
© STEP 08 按 Ctrl+T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 缩 小 图 像 ， 按 Enter 键 确认 变换 ， 并 移 至 合适 位 置 ， 


效果 如 图 9-30 所 示 。 
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复制 “多 边 形 1” 形 状 图 层 ， 得 到 “多 边 形 1 拷贝 ”形状 图 层 ， 如 图 9-31 所 示 。 

按 Ctrl+T 组 合 键 ， 调 出 变换 控制 框 ， 在 工具 属性 栏 中 设置 “旋转 ”为 60 度 ， 此 时 图 像 编 辑 窗 
中 的 图 像 也 会 随 之 旋转 ， 如 图 9-32 所 示 。 
运 攻 ”路 公正 旦 
Pp vv 四 OoTDEB 
正常 ~ 不 通明 度 : 100% ~ 
锁定 :图 wy 中 共生 填充 :100% ~ 


° Em 


E 杀 边 于 1 


国 : 汉 


将 图 像 移 至 合适 位 置 后 ， 按 Enter 键 确认 变换 ， 如 图 9-33 所 示 。 

按 Ctrl+Shift+Alt+T 组 合 键 4 次 ， 即 可 复制 并 旋转 图 像 4 次 ， 制 作出 一 个 环形 的 图 案 ， 效 果 如 
图 9-34 所 示 。 

按 Ctrl+O 组 合 键 ， 打 开 “ 标 志 .psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 昂 至 背景 图 像 编 
辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 9-35 所 示 。 


加 


选取 工具 箱 中 的 横 排 文字 工具 ， 单 击 “窗口 ”| “字符 ”命令 ， 在 @ 弹 出 的 “字符 ”面板 中 ， 


设置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 30 点 、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 
效果 如 图 9-36 所 示 。 
在 图 像 编辑 窗口 中 输入 相应 文本 ， 如 图 9-37 所 示 。 
选中 “天 墅 ”， 在 字符 面板 中 设置 “字体 系列 ”为 “ 段 宁 毛笔 行书 ”， 效 果 如 图 9-38 所 示 。 
盖 印 是 一 种 特殊 的 合并 图 层 的 方法 ， 它 可 以 将 多 个 图 层 中 的 图 像 内 容 合 并 到 一 
个 新 的 图 层 中 ， 但 同时 又 能 保持 其 他 图 层 是 完好 无 损 的 。 
如 果 想 要 得 到 某 些 图 层 的 合并 效果 ， 而 又 想 要 保持 原 图 层 完整 时 ， 盖 印 图 层 是 最 好 的 解决 
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< 5s] 人 弹出 光 | 皇 


训 3 点 ~ 斑 自动 
VAD ~ 四 。 
加 0% 
1T so% 工 100% 
嫩 0 点 二 : 
予 。 裕 化 攻 。 裕 化 反 
工 TTTf 人 rs T' TTIFE 天 墅 - 裕 华 园 共 铭 丛 守 四 
fi a AT 
设 
(22 网 锐利 ~ 
图 9-36 设置 文字 参数 图 9-37 输入 文本 图 9-38 修改 字体 


9 STEP 17 按 Shiftt+Ctrl+Alt+E 组 合 键 ， 盖 印 可 见 图 层 ， 得 到 “图 层 3” 图 层 ， 如 图 9-39 所 示 。 
9 STEP 18 选取 工具 箱 中 的 椭圆 选 框 工具 ， 在 图 像 编辑 窗口 中 绘制 一 个 正 圆 选 区 ， 如 图 9-40 所 示 。 
9 STEP 19 按 Ctrl+O 组 合 键 ， 打 开 “ 今 日 头条 界面 1.jpg” 素 材 图 像 ， 如 图 9-41 所 示 。 


通道 路径。 图 屋 王 日 入 
裕 华 轩 ED 
pa -| 四 GTOB 人 
3 i 二名， 字 扩 ， 拓 | 
v 和 度 : 100% ~ 9 8 


试 E: 图 mW 中 村 @ 填充 : 100% ~ 
-= 
全 | 工 二 
。 苔 得 到 
© 加 | 多 边 形 1 拷贝 5 
c 友 四 @ 四 避 他 
图 9-39 得 到 “图 层 3” 图 层 图 9-40 ”绘制 一 个 正 圆 选区 图 9-41 素材 图 像 
9 STEP 20 切换 至 “今日 头条 头像 设计 ”图 像 编辑 窗口 ， 选 取 工具 箱 中 的 移动 工具 ， 将 选区 内 的 图 像 拖 
电 至 “今日 头条 界面 1 ”图 像 编辑 窗口 中 ， 适 当 调 整 图 像 的 大 小 和 位 置 ， 如 图 9-42 所 示 。 
9 STEP 21 在 “图 层 ” 面 板 中 人 @ 选 择 “ 图 层 1” 图 层 ， 人 @ 单 击 面板 底部 的 “添加 矢量 蒙 版 ”按钮 ， 合 为 
“图 层 1” ES 如 图 9- He 


动态 ”文章 视频 。 月 


小 商 层 一 柑 带 院 为 什么 幅 ? [ 
合 外 有 六 七 十 万 ， 糙 买房 还 是 理财 bad 
好 ? 


全 


所 ey 拓 量 蒙 版 是 由 钢笔 、 自 定形 状 等 矢量 工具 创建 的 蒙 版 ( 层 莹 版 和 前 贴 莹 版 
专家 指点 ) 部 是 是 基于 像素 的 蒙 版 ) ， 它 与 分 辩 率 无 关 ， 无 论 图 像 自身 的 分 辨 率 是 多 少 ， 只 要 
使 用 了 该 蒙 版 ， 都 可 以 得 到 平滑 的 轮廓 。 : 
矢量 蒙 版 缩 览 图 与 图 像 缩 览 图 之 间 有 一 个 链接 图 标 轿 。 它 表示 蒙 版 与 图 像 处 于 链接 状态 ， 此 
”时 进行 任何 变换 操作 ， 蒙 版 都 与 图 像 一 起 变换 。 | 


@ STEP 22 设置 前 景色 为 黑色 ， 选取 工具 箱 中 的 画笔 工具 ， 在 工具 属性 栏 中 设置 “ “大 小 ”为 50、“ 硬 
度 ” 为 100%， 在 图 像 编 辑 窗口 中 适当 涂抹 ， 隐 藏 部 分 图 像 ， 效 果 如 图 9-44 所 示 。 
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四 GTZODBB 
Y 不 透明 度 : 100% ~ 
锁定 : 区 yw 中共 人 填充 : 100% ~ 
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-中 


@ 单 二 


所 疯 89. 曲 回 从 
图 9-42 ” 拖 慢 图 像 图 9-43 ”添加 图 层 蒙 版 图 9-44 隐藏 部 分 图 像 


9.2.2 ”主页 横幅 广告 设计 


在 制作 主页 横幅 广告 时 ， 先 调整 背景 图 像 的 颜色 并 适当 模糊 ， 再 输入 文字 ， 为 文字 添加 图 层 样 
式 ， 最 后 再 将 制作 好 的 图 像 拖 忠 至 头条 号 界面 中 ， 即 可 完成 设计 。 
本 实例 的 最 终 效果 如 图 9-45 所 示 。 


图 9-45 


素材 文件 “| 素材 \ 第 9 章 \ 模 幅 背 景 jpg、 房 产 标志 .psd、 今 日 头条 界面 2jpg 
效果 \ 第 9 章 \ 主 页 横幅 广告 设计 .psd、 主 页 横幅 广告 设计 jpg 


9.2.2 主页 横幅 广告 设计 .mp4 


9 STEP 01 按 Ctrl+N 组 合 键 ， 弹 出 “新 建文 档 ” 对 话 框 , 设置“ 名称” 为 “主页 横幅 广告 设计 ”、“ 宽 
人 人 “高 度 ” 为 271 像 素 、“ 分 辨 率 ” 为 300 像 素 /英寸 、“ 颜 色 模式 ”为 “RGB 颜色 ”、 
景 内 容 ” 为 “和 白色”， 单 击 “创建 ”按钮 ， 如 图 9-46 所 示 ， 新 建 一 个 空白 图 像 。 
9 STEP 02 按 Ctrlt+O 组 合 键 ， 打 开 “ 横 幅 背 景 .jpg” 素 材 图 像 ， 如 图 9-47 所 示 。 
9 STEP 03 单 击 “ 窗 口 ”|“ 调 整 ” 命 令 ， 展 开 “ 调 整 ”面板 ， 在 其 中 单 击 “ 曲 线 ” 按 钮 ， 新 建 “曲线 
1” 调 整 图 层 ， 如 图 9-48 所 示 。 


9 STEP 04 在 展开 的 “属性 ”面板 中 ， 在 曲线 上 单 击 鼠 标 左 键 新 建 一 个 控制 点 ， 在 下 方 设置 “输入 ”为 
129、“ 输 出 ”为 152， 效 果 如 图 9-49 所 示 。 
9 STEP 05 此 时 图 像 的 亮度 随 之 提高 ， 效 果 如 图 9-50 所 示 。 


Ue 
因 
] 四 
内 办 
图 9-46 设置 各 选项 图 9-47 素材 图 像 
通道 路 芭 。 图 时 二 属性 Device Preylew 办 | 至 
pg -四 era 国 O = 
正常 ~ 不 通明 度 : 100% ~ 


名 :图 y 中 共生 十 8:10% ~ 
© 1 
9 计 晤 EE 


o 如 四 .回回 自 aiaa eR 0 。 
图 9-48 ”新建 调整 图 层 图 9-49 ”设置 各 参数 图 9-50 图像 效果 
9STEP 06 在 “调整 ”面板 中 单 击 “自然 饱和 度 ” 按 
钮 新建“ 自然 饱和 度 1” 调 整 图 层 ， 在 “属性 ”面板 
中 ,设置 “自然 饱和 度 ” 为 66、“ 饱 和 度 ” 为 78， 效 果 el 
如 图 9-51 所 示 。 图 9-51 图 像 效 果 
9 STEP 07 按 Shift+Ctrl+Alt+E 组 合 键 ， 盖 印 可 见 图 层 ， 得 到 “图 层 1” 图 层 ， 如 图 9-52 所 示 。 
9 STEP 08 运用 移动 工具 将 素材 图 像 拖 中 至 背景 图 像 编辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 9-53 所 示 。 
9 STEP 09 单 击 “ 滤 镜 ”|“ 模 糊 ”|“ 方 框 模糊 ”命令 ，@ 弹 出 “ 方 框 模糊 ”对 话 框 ，@ 设 置 “ 半 径 ” 
为 6 像素 ， 如 图 9-54 所 示 。 


通道 ”路径 加 层 于 
Pai -四 OOTHBe Gms) 
正常 ~ | 不 透明 度 : 100% ~ 
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图 9-52 得 到 “图 层 1” 图 层 图 9-53 拖 役 图 像 图 9-54 设置 “半径 ”参数 
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rg 
[ 才 守 指点 ， 关 的 村 机 村 效果。 “半生 ” 信 可 以 油 束 用 于 计算 给 定 像素 的 平均 值 的 区 域 大 小 。 


9 STEP 10 单 击 “ 确 定 ”按钮 ， 即 可 应 用 “ 方 框 模糊 ” 滤 镜 ， 效 果 如 图 9-55 所 示 。 
9 STEP 11 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 大 黑 简 体 ” 
“字体 大 小 ”为 17.5 点 、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 为 255 ) ， 在 图 像 编 辑 窗口 中 输入 文字 ， 如 


图 9-56 所 示 。 


时 本 
图 9-55 图像 效 果 图 9-56 输入 文字 
9 STEP 12 人 @Q 单 击 “ 图 层 ”面板 底部 的 “添加 图 层 样式 ”按钮 ， 在 弹出 的 菜单 中 全 选择 “渐变 二 加 ” 选 


项 ， 效 果 如 图 9-57 所 示 。 
9 STEP 13 打开 “图 层 样 式 ” 对 话 框 ， 单 击 “ 点 按 可 编辑 渐变 ”按钮 ，@ 弹 出 “渐变 编辑 器 ”对 话 框 ， 


@ 设 置 4 个 色 标 的 RGB 参 数值 分 别 为 255、206、73; 223、158、1; 250、233、173; 255、216、0， 如 
图 9-58 所 示 。 


me a: | Wi) 


CE 避 百 可 于 
图 9-57 选择 “渐变 和 登 加 ”选项 图 9-58 ”设置 色 标 颜色 
一 -一 一 一 渐变 编辑 器 中 的 “位 置 ”文本 框 中 显示 标记 点 在 渐变 效果 预览 条 的 位 置 ， 用 户 
i 志 家 指点 ) 可 以 给 入 数字 来 改变 颜色 标记 上 的 位 置 ， 也 可 以 直接 艳遇 渐变 颜色 带 下 端的 颜色 标 
， 记 点 。 单 击 Delete 键 可 将 此 颜色 标记 点 删除 。 | 
”在 “ 预 设 ” 选 项 区 中 ， 前 两 个 渐变 色 块 是 系统 根据 前 景色 和 背景 色 自动 设置 的 。 若 用 户 对 当 
”前 的 渐变 色 不 满意 ， 也 可 以 在 该 对 话 框 中 ， 通 过 渐变 滑 块 对 渐变 色 进 行 调整 。 : 
6 STEP 14 单 击 “ 确 定 ” 按 钮 ， 返 回 “ 图 层 样式 ”对 话 框 ， 设 置 “ 不 透明 度 ” 为 100%、“ 样 式 " 为 “ 线 
性 ”、“ 和 角度 ”为 -56， 如 图 9-59 所 示 。 
6 STEP 15 @ 选 中 “投影 ” 复 选 框 ，@ 设 置 “ 不 透明 度 ” 为 75%、“ 角 度 ” 为 00、“ 距 离 ”为 7 像素 、 
“扩展 ”为 0、“ 大 小 ”为 4 像素 ， 如 图 9-60 所 示 。 
e STEP 16 单 击 “ 确 定 ”按钮 ， 即 可 为 文字 添加 相应 图 层 样式 ， 如 图 9-61 所 示 。 
eSTEP 17 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 细 黑 一 简 


体 ”、“ 字 体 大 小 ”为 5.7 点 、“ 行 距 ” 为 7 点 、“ 设 置 所 选 字 符 的 字 距 调整 ”为 -75、“ 颜 色 ” 为 白色 
( RGB 参数 值 均 为 255 ) ， 并 激活 仿 粗 体 图 标 ， 在 图 像 编辑 窗口 中 输入 文字 ， 如 图 9-62 所 示 。 
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图 9-60 设置 各 选项 
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图 9-61 应 用 图 层 样式 图 9-62 输入 文字 

9 STEP 18 选取 工具 箱 中 的 横 排 文 字 工具 ， 在 “字符 ”面板 中 全 设置 “字体 系列 ”为 “方正 大 标 宋 简 
体 ”、“ 字 体 大 小 ”为 4.5 点 、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 四 并 激活 仿 斜 体 图 标 ， 如 
图 9-63 所 示 。 

9 STEP 19 在 图 像 编辑 窗口 中 输入 文字 ， 并 移 至 合适 位 置 ， 如 图 9-64 所 示 。 


EE 六 | 本 


图 9-63 设置 各 选项 图 9-64 输入 文字 
9 STEP 20 单 击 “ 文 件 ” |“ 打 开 ” 命 令 ， 打 开 “ 房 产 标志 .psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 
电 至 背景 图 像 编辑 窗口 中 ， 适 当 调整 图 像 的 大 小 和 位 置 ， 效 果 如 图 9-65 所 示 。 
e@STEP 21 在 “图 层 ” 面 板 中 选中 “图 层 3 ”图 层 ， 双 击 鼠 标 左 键 ， 打 开 “ 图 层 样 式 ” 对 话 框 ， 选 中 
“颜色 到 加 ” 复 选 框 ， 设 置 “ 肥 加 颜色 ”为 白色 ( RGB 参 数值 均 为 255 ) ， 单 击 “ 确 定 ”按钮 ， 应 用 
“颜色 芭 加 ”图 层 样式 ， 效 果 如 图 9-66 所 示 。 


图 9-65 拖 役 图 像 
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9 STEP 22 选中 除 “背景 

图 9-67 所 示 。 
e@ STEP 23 按 Ctrl+O 组 合 键 ， 打 开 
换 至 背景 图 像 编辑 窗口 ， 运 
适当 调整 图 像 的 位 置 ， 如 图 9-69 所 示 。 


©0 STEP 24 切 


辑 窗 


告 设计 


中 ， 


”图 


层 外 的 所 有 图 层 ， 按 Ctrl+G 组 合 键 ， 为 图 层 编组 ， 得 到 “组 1 
“今日 头条 界面 2.jpg” 素 材 图 像 ， 如 图 9-68 所 示 。 
移动 工具 将 图 层 组 的 图 像 拖 卸 至 “今日 头条 界 画 


通 让 ”路 公 图 层 至 
Pa goernae | 国际 总 图 健康 特卖 房产 
EE ~ 不通 明度: 100% 
鲍 E: 2 中 全 自 十: l00% ~ 关于 提前 还 数 的 “那些 事 儿 ” 
@ CC 着 自 
0 本 | | 
所 口 8. 白 日 站 ” : 位 
图 9-67 得 到 “组 1” 图 层 组 国 9-68 素材 图 像 图 9-69 卸 复 图像 
9.2.3 图 文 推送 广告 封面 设计 
在 制作 图 文 推送 广告 封面 时 ， 先 调整 背景 图 像 的 偏 色 现象 ， 添 加 相应 素材 并 模糊 背景 ， 
的 文字 ， 再 将 制作 好 的 图 像 拖 电 至 头条 号 界面 中 ， 即 可 i 8 
本 实例 的 最 终 效 果 如 图 9-70 所 示 。 


图 9-70 ”实例 效果 
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QQ 9.0 全 新 体验 开启 ; 界面 
全 变 了 


社会 图 片 娱乐 问答 科技 
- 局 


ORANGE X10 系列 立即 购买 


外 卖 的 送 餐 员 ,一 单 可 以 挣 多 少 钱 ? 


汽车 十 


9 


(a 


素材 文件 


gl a 全 面 屏 手机 .jpg、 标 志 3.png、 


效果 文件 i 告 封面 设计 .psd、 图 文 推送 广告 封面 设计 .jpg 


视频 文件 |9.2.3 图 文 推送 广告 封面 设计 Inp4 


图 层 组 ， 如 


2” 图 像 编 


今日 头条 界 


第 9 章 ”头条 号 广告 设计 


9 STEP 01 按 Ctrl+N 组 合 键 ， 全 弹出 “新 建文 档 ” 对 话 框 ，@ 设 置 “ 名 称 ” 为 “图 文 推送 广告 封面 设 
计 ”、“ 宽 度 ” 为 990 像 素 、“ 高 度 ” 为 556 像 素 、“ 分 辨 率 ” 为 300 像 素 /英寸 、“ 颜 色 模式 ”为 
“RGB 颜 色 ”、“ 背 景 内 容 ” 为 “白色 ”,， 合 单 击 “ 创 建 ” 按 钮 ， 如 图 9-71 所 示 ， 新 建 一 个 空白 图 像 。 

9 STEP 02 按 Ctrl+O 组 合 键 ， 打开“ 封面 广告 背景 jpg” 素 材 图 像 ， 如 图 9-72 所 示 。 
” 苹 @@ 漳 出 


名单 击 


图 9-71 设置 各 选项 
9 STEP 03 按 Ctrl+J 组 合 键 ， 复 制 “背景 ” 


Te 


| 


@ STEP 04 按 Ctrl+M 组 合 键 ，@ 弹 ! 


下 方 设置 “输入 ”为 114、“ 输 

通道 路 全 。 回忆 至 

吃 类 型 morna® 

正常 不 通明 度 ; 100% 

钢 证 ; 图 A 中 村 填充 ; 100% 

- 融 守 | 

° Es 
所 口 8 白 日 全 

图 9-73 得 到 “图 层 1” 图 层 


9 STEP 05 单 击 “确定 ”按钮 ， 即 可 应 


层 ， 得 到 
曲线 ”对 话 框 ， 


图 9-72 素材 图 像 
“图 层 1” 图 层 ， 如 图 9-73 所 示 。 
加 在 曲线 上 单 击 鼠 标 左 键 新 建 一 个 控制 点 ， 加 在 


时 ”为 145， 如 图 9-74 所 示 。 


所 示 执 时 
© (0255)0) 过 
新 本) 油 时 %(6) 2 
同 入 大 
画 昌 Se) 
总 夺 T) 
a 
站 ise) 


用 “曲线 ”调整 


图 9-74 ”设置 各 参数 
图 像 亮度 ， 效 果 如 图 9-75 所 示 。 


9 STEP 06 按 Ctri+B 组 合 键 ，@ 弹 出 “色彩 平衡 ”对 话 框 ， 全 设置 “ 色 阶 ”各 参数 值 分 别 为 86、43、 


13， 如 图 9-76 所 示 。 


图 9-75 


图 像 效 果 


确定 
取消 
预览 p) 
色调 平衡 
阴影 9) © 中 间 调 (D) 高 光 (H) 


保持 明度 (V) 


图 9-76 设置 “ 色 阶 ”各 参数 


Photoshop 


新 媒体 广告 设计 
e STEP 07 单 击 “ 确 定 ”按钮 ， 即 可 应 
9 STEP 08 单 击 “ 图 像 ”|“ 调 整 ”|“ 自 
和 度 ” 为 77， 单 击 “ 确 定 ” 按 钮 ， 提 高 
e STEP 09 运用 


所 示 。 


图 9-77 图 像 效 果 


9 STEP 11 按 Ctrl+J 组 合 键 ， 复制 “背景 ”图 层 ， 得 到 “图 


所 示 。 
9 STEP 12 选取 工具 箱 中 的 魔 棒 工具 ， 
单 击 鼠 标 左 键 ， 选 中 背景 图 像 ， 在 选 
令 ， 如 图 9-82 所 示 。 


图 9-80 ”素材 图 像 


图 9-78 图像 效 果 
9 STEP 10 按 Ctrl+O 组 合 键 ， 打 开 “ 全 面 屏 手机 :jpg” 素 材 图 像 ， 如 图 9-80 所 示 。 


“色彩 平衡 ”调整 图 像 过 了 


层 1” 


坊间 。 半径 。 本 办 
Pa meornae® 
bs 3 十 省 明度 : 100% 


识 : 图 y 中 共生 博克: 100% 


如 加 @ 斩 日 会 


图 9-81 隐藏 “背景 ”图 层 ”图 9-82 


9 STEP 13 执行 上 述 操作 后 ， 即 可 扩大 选 


区 ， 按 Delete 键 ， 删 除 选 


eSTEP 14 按 Ctrl+D 组 合 键 ， 取 消 选区 ， 


运用 移动 


整 图 像 的 位 置 ， 效 果 如 图 9-84 所 示 。 


删除 图 像 


图 9-83 


在 工具 属性 栏 中 设置 “ 容 差 ”为 1， 在 图 像 编 辑 窗口 中 白色 区 域 
区 内 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “选取 相似 ” 命 


图 9-79 拖 慢 图 像 


具 将 素材 图 像 拖 点 至 背景 图 像 编辑 窗 


区 内 的 图 像 ， 如 图 9-83 所 示 。 


F 偏 青 的 现象 ， 效 果 如 图 9-77 所 示 。 

然 饱 和 度 ” 命 令 ， 打 开 “ 自 然 饱 和 度 ” 对 话 框 ,设置 “自然 饮 
图 像 色 彩 的 饱和 度 ， 效 果 如 图 9-78 所 示 。 
移动 工具 将 素材 图 像 拖 抱 至 背景 图 像 编辑 窗口 


ph， 适当 调整 图 像 的 位 置 ， 效 果 如 图 9-79 


慨 ， 并 隐藏 “背景 ”图 像 ， 如 图 9-81 


图 9-84 拖 如 图像 


中 ,适当 调 


e@STEP 15 选取 工具 箱 中 的 广 棒 工具 ， 选 中 部 分 图 像 ， 如 图 9-85 所 示 。 

e@STEP 16 在 “图 层 ” 面 板 中 选中 “图 层 1” 图 层 ， 在 选区 内 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 
“通过 拷贝 的 图 层 ” 命 令 ， 如 图 9-86 所 示 。 

9 STEP 17 执行 上 述 操 作 ， 即 可 复制 选区 内 的 图 像 ， 得 到 “图 层 3” 图 层 ， 如 图 9-87 所 示 。 

9 STEP 18 选中 “图 层 1” 图 层 ， 单 击 “ 滤 镜 ”|“ 模 糊 ”|“ 方 框 模糊 ”命令 ， 弹 出 “ 方 框 模糊 ”对 话 
框 ， 设置 “半径 ”为 10 像 素 ， 单 击 “确定 ” 按 钮 ， 效 果 如 图 9-88 所 示 。 


Pal meorna® 
正常 不通 明度 : 100% 
证 :图 A 中 合 自 博克 :|100% 
= 日 me: 

oD 

下 

。 国 得 到 全 


太 口 8 白 昌 位 
图 9-85 ”选中 部 分 图 像 图 9-86 选择 “通过 持 贝 的 图 层 "命令 图 9-87 得 到 “图 层 3” 图 层 
e@STEP 19 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 细 圆 简体 ”、 
“字体 大 小 ”为 9 点 、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 并 激活 仿 粗 体 图 标 ， 在 图 像 编 辑 窗口 
中 输入 文字 ， 如 图 9-89 所 示 。 
9 STEP 20 复制 刚刚 输入 的 文字 ， 并 移 至 合适 位 置 ， 在 “字符 ”面板 中 设置 “字体 大 小 ”为 8 点 ， 运 用 
横 排 文字 工具 修改 文本 内 容 ， 如 图 9-90 所 示 。 


精致 对 焦 更 完美 险 入 


zy ORANGE- X10 系列 
We 和 履 文 本] 本 


S 


PP 
图 9-88 图像 效果 图 9-89 ”输入 文字 图 9-90 修改 文本 内 容 
9 STEP 21 @Q 选 中 “系列 ”文字 ， 在 “字符 ”面板 中 全 设置 “字体 大 小 ”为 6.5 点 ， 如 图 9-91 所 示 。 


9 STEP 22 @Q 选 中 ORANGE 文 字 ， 在 “字符 ”面板 中 全 设置 “字体 系列 ”为 Century Gothic， 如 图 9-92 所 
示 ， 按 Ctrl+Enter 组 合 键 确认 输入 。 
9 STEP 23 选取 工具 箱 中 的 圆 角 矩 形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 无 、“ 描 边 ” 为 白色 ( RGB 
参数 值 均 为 255 ) 、“ 描 边 宽度 ”为 3 像素 、“ 半 径 ” 为 10 像 素 ， 在 图 像 编 辑 窗口 中 绘制 一 个 圆 角 答 
形 ， 如 图 9-93 所 示 。 


@ 迁 中 


~ IORANGEB.sl'E"] 6 ORANGE X10 系列 


图 9-91 设置 “字体 大 小 ” 图 9-92 设置 “字体 系列 ” 图 9-93 绘制 圆 角 矩形 


Photoshop 


新 媒体 广告 设计 


9@ STEP 24 选中 “ 圆 角 和 矩形 1” 形 状 图 层 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “混合 选项 ” 命 
令 ， 贺 弹出 “图 层 样式 ”对 话 框 ，@@ 选 中 “外 发 光 ” 复 选 框 ， 加 设置 “不 透明 度 ” 为 32%、 “扩展 ” 
为 6%、“ 大 小 ”为 10 像 素 ， 如 图 9-94 所 示 。 

9 STEP 25 单 击 “ 确 定 ” 按 钮 ， 即 可 应 用 “外 发 光 ” 图 层 样式 ， 效 果 如 图 9-95 所 示 。 


FOOD a 
BP|] “ 图 
二 ORANGE| X10 系列 
rr 国 


本 


图 9-94 设置 各 选项 图 9-95 ”应 用 图 层 样式 

9 STEP 26 选取 工具 箱 中 的 横 排 文 字 工 具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 细 倩 简体 ”、 
“字体 大 小 ”为 6.5 点 、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 并 激活 仿 粗 体 图 标 ， 在 图 像 编 辑 窗 
口中 输入 文字 ， 如 图 9-96 所 示 。 

9 STEP 27 按 Ctrl+O 组 合 键 ， 打 开 “ 标 志 3.png” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 忠 至 背景 图 像 编 
辑 窗 口中 ， 如 图 9-97 所 示 。 

9 STEP 28 选取 工具 箱 中 的 魔 棒 工具 ， 在 工具 属性 栏 中 设置 “ 容 差 ” 为 10， 选 中 部 分 图 像 ， 如 图 9-98 
所 示 。 


输入 
ORANGE X10 系列 


立即 抢购 > 


图 9-96 输入 文字 图 9-97 拖 慢 图 像 图 9-98 选中 部 分 图 像 | 
9 STEP 29 按 Shift+F6 组 合 键 ， 人 @ 弹 出 “羽化 选区 ”对 话 框 ， 全 设置 “羽化 半径 ”为 0.5， 全 单 击 “ 确 


区 。 


果 如 图 9-100 所 示 。 

9 STEP 31 按 Ctrl+T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 的 大 小 ， 按 Enter 键 确认 变换 ， 适 当 调 整 图 
像 的 位 置 ， 效 果 如 图 9-101 所 示 。 

9 STEP 32 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 策 设 置 “ 字 体系 列 ” 为 Century Gothic、 
“字体 大 小 ”为 3 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 75、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 为 255 ) ， 
@ 并 激活 仿 粗 体 图 标 ， 如 图 9-102 所 示 。 


9 STEP 33 在 图 像 编辑 窗口 中 输入 文字 ， 如 图 9-103 所 示 。 
9 STEP 34 选中 除 “ 背 景 ”图 层 外 的 所 有 图 层 ， 按 Ctrl+G 组 合 键 ， 为 图 层 编组 ， 得 到 “组 1” 图 层 组 ， 如 
图 9-104 所 示 。 


羽化 半生 (RJ: [0.5 像素 人 确定 ) 


回 应 用 画布 边界 的 效果 
回 单 击 
图 9-99 设置 “羽化 半径 ”参数 图 9-100 填充 后 取消 选区 


加 设置 


ORANGE 


刀口 9. 品 日 自 


美国 英语 a 浑浊 


图 9-102 设置 各 选项 图 9-103 输入 文字 图 9-104 得 到 “组 1” 图 层 组 


er 如 果 用 户 在 编辑 图 像 时 ， 图 层 越 来 越 多 ， 要 很 费劲 才能 找到 需要 的 图 层 时 ， 可 
专家 指点 以 建立 图 层 组 来 将 图 层 分 类 。 

“图 层 组 就 类 似 二 文件 赤 ， 可 以 将 图 层 接 照 类 别 放 在 不 同 的 组 内 ， 当 关闭 图 层 组 后 ,在 “图 
”面板 中 就 只 显示 图 层 组 的 名 称 。 : 
图 层 组 可 以 像 普通 图 层 一 样 移动 、 复 制 、 链 接 、 对 齐 和 分 布 ， 也 可 以 进行 合并 。 

新 建 图 层 组 时 ， 图 层 组 默认 的 图 层 样式 为 “ 穿 透 ”， 它 表示 图 层 组 不 产生 混合 效果 。 如 果 近 
择 其 他 模式 ， 则 组 中 的 图 层 将 以 该 组 的 混合 模式 与 组 内 的 图 层 混合 

e@STEP 35 按 Ctrl+O 组 合 键 ， 打 开 “ 今 日 头条 界面 3.jpg” 素 材 图 像 ， 如 图 9- 105 所 示 。 

9 STEP 36 切换 至 背景 图 像 编辑 窗口 ， 运 用 移动 工具 将 图 层 组 的 图 像 拖 息 至 “今日 头条 界面 2” 图 像 纺 
辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 如 图 9-106 所 示 。 


攻 


外 卖 的 送 餐 员 ,一 单 可 


ms ‘a8 


图 9-105 ”素材 图 像 图 9-106 ” 拖 旬 图像 


新 浪 微 博 是 一 个 由 新 浪 网 推出 、 提 供 微型 博客 服务 类 的 社交 网 站 。 用 户 可 
以 将 自己 想到 的 事情 写成 一 句 话 ， 通 过 电脑 或 者 手机 随时 随地 分 享 给 朋友 ， 一 
起 分 享 、 讨 论 。 新 浪 微 博 现 已 成 为 热门 的 社交 平台 。 


微 博 广告 
设计 


> 设计 一 个 好 名 称 * 微 博 LOGO 设 计 
> 设计 合适 的 微 博 头像 p> 微 博 主 图 设计 
p> 借 时 下 热门 话题 炒作 p> 微 博 广告 设计 
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第 10 章 ” 微 博 广告 设计 


由 4 局 有 前 期 准备 : 微 博 新 媒体 设计 要 点 


微 博 平台 相对 于 其 他 新 媒体 平台 来 说 ， 可 设计 的 空间 较 少 ， 所 以 更 应 该 好 好 利用 仅 有 的 几 个 小 空 
间 ， 最 大 限度 地 展示 自己 的 优势 与 特点 ， 让 用 户 可 以 更 快 更 好 地 了 解 商家 的 主 营业 务 。 本 节 主 要 介绍 
微 博 新 媒体 设计 要 点 。 


10.1.1 设计 一 个 好 名 称 


一 个 简单 易 记 的 名 称 ， 可 以 让 用 户 第 一 次 听 的 时 候 就 觉得 有 趣 ， 在 脑海 中 存留 印象 ， 也 让 微 博 更 
加 容易 传播 ， 并 带 来 更 多 的 粉丝 与 流量 。 例 如 ，“vivo 智 能 手机 ”的 官方 微 博 ， 这 个 名 称 又 好 在 哪里 
呢 ? 它 可 以 让 用 户 在 不 明确 其 官 微 名 称 时 就 猜测 出 来 ， 这 比 花费 大 价钱 去 推广 传播 还 要 更 有 效 ， 如 图 
10-1 所 示 为 其 官方 微 博 主页 。 


所 Yo 暂 能 手机 es 
[i 


@ va 本 全 手机 
志和 


Ta 
@ La) 


【全 本 并 入, 先 抢先 兰 】 M 
Mp 王者 


话 直 畦 发 答 全 过 和 一 名 说 大 家 。 


+ x pr fn + 对 


图 10-1 “vivo 智 能 手机 ”的 官方 微 博 
所 以 ， 有 一 个 好 的 名 称 是 非常 利于 推广 传播 的 。 下 面 详细 介绍 一 下 设置 微 博 名 称 的 方法 。 
9 STEP 01 打开 新 浪 微 博 ，@Q 单 击 右 下 角 的 “我 ”图 标 ，@ 单 击 微 博 头像 ， 如 图 10-2 所 示 ; 进入 “个 人 
主页 ”界面 ， 合 单 击 “ 更 新 基本 资料 ”按钮 ， 如 图 10-3 所 示 。 


种 加 好 友 委 设置 
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图 10-2 单 击 微 博 头 像 图 10-3 单 击 “更 新 基本 资料 ”按钮 


Photoshop 
新 媒体 广告 设计 


EE ap 点 需要 注意 ， 普 通 会 员 一 年 内 只 能 修改 1 次 名 称 ， 会 员 则 根据 等 级 的 
. 点 一 年 可 以 修改 95 次 ， 所 以 取 名 时 应 当 慎重 一 点 。 : 


oSTEP 02 进入 “基本 信息 界面 ， 人 @ 单 击 昵称 ， 如 图 10-4 所 示 ; @ 进 入 “修改 昵称 " 8 
称 后 ，@ 单 击 “ 确 定 ” 按 钮 ， 如 图 10-5 所 示 ， 即 可 保存 设置 。 
ona0 rm Ovovece [@ 进 入 > 


- 基本 信息 
从 用户 人 好 . 铂 障 克 玫 芝 通 用 户 一 年 改 一 次 也 和 


人 "< | 


OE 
: @ 音 去 
图 10-4 单 击 昵称 图 10-5 修改 昵称 


10.1.2 ”设计 合适 的 微 博 头像 


当 发 布 一 条 微 博时 ， 用 户 看 的 第 一 眼 可 能 不 是 微 博 内 容 ， 而 是 微 博 头 像 。 这 个 小 小 的 头像 很 重 
要 ， 它 是 一 个 很 好 的 广告 位 ， 用 得 恰当 的 话 ， 可 以 带 来 更 多 的 关注 。 例 如 “超级 实用 的 小 百科 ” 微 
博 ， 它 的 头像 是 巧妙 地 结合 了 昵称 中 的 “ 百 ” 字 来 设计 ， 让 用 户 看 见 头像 后 会 立马 联想 到 昵称 ， 同 时 
也 就 印 在 了 脑海 中 ， 如 图 10-6 所 示 。 
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图 10-6 “超级 实用 小 百科 ” 微 博 

般 来 说 ， 用 户 都 是 看 头像 来 区 分 不 同 的 微 博 号 的 ， 所 以 ， 设 计 一 个 有 自己 特色 的 头像 并 展示 出 

来 ， 是 很 重要 的 。 下 面 介 绍 设置 微 博 头像 的 操作 方法 。 

9 STEP 01 进入 “个 人 主页 ”界面 ，@ 单 击 头像 图 片 ， 如 图 10-7 所 示 。@ 进 入 到 “头像 挂件 商城 ”页 
面 ， 个 再 次 单 击 头像 ， 如 图 10-8 所 示 。 
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图 10-7 单 南 头 像 图 上 图 10-8 ”再 次 单 击 头像 
9 STEP 02 人 @ 页 面 底部 会 弹出 相应 按钮 ， 全 单 击 “ 更 换 头像 ”按钮 ， 如 图 10-9 所 示 ; 合 进 入 “相机 胶 
卷 ” 界 面 ， 用 户 可 以 @ 单 击 “ 拍 摄 照片 ”按钮 ， 全 还 可 以 直接 单 击 照片 ， 如 图 10-10 所 示 ， 然 后 再 按 提 
示 完 成 操作 即 可 。 


大 头像 挂件 商城 Es 


图 10-9 单 击 “更 换 头 像 ” 按 钮 图 10- 10 单 击 照 上 
用 户 可 以 参考 以 上 方法 ， 将 头像 换 成 合适 的 图 片 ， 但 是 一 定 要 记得 展示 自己 最 大 的 亮点 ， 并 且 简 
单 好 懂 ， 可 以 让 人 一 眼 明 白 含 义 。 


10.1.3 ” 借 时 下 热门 话题 炒作 


自从 新 浪 微 博 开放 了 微 博 话题 运营 后 ， 营 销 话题 就 慢 慢 成 为 一 种 新 的 营销 方式 ， 通 过 提高 在 热门 
话题 榜 上 的 排名 ， 可 以 有 效 推广 个 人 与 企业 ， 增 加 粉丝 。 
如 何 玩 转 话题 ， 迅 速 涨 粉 呢 ， 主 要 从 3 点 来 实 


现 ， 如 图 10-11 所 示 。 方法 see 

例如 电影 《从 你 的 全 世界 路 过 》， 电 影 在 上 映 ”| 炒作 话题 发 布 自己 体验 活动 的 内 容 
前 ， 制 作 方 就 通过 影片 中 主演 的 微 博大 V 的 巨大 影 运用 创意 视频 打造 话题 
响 力 ， 发 布 “# 电 影 从 你 的 全 世界 路 过 #” 话 题 ， 从 


图 10-11 炒作 话题 的 方法 
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而 让 更 多 的 人 去 通过 话题 评论 提前 认识 电影 ， 最 后 达成 票房 8 亿 多 的 高 度 。 如 图 10-12 所 示 为 《从 你 的 
全 世界 路 过 》 在 微 博 平 台 上 的 大 V 博 文 。 
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图 10-12 大 V 博 文 


苑 现 ] 案 例 实战 : 微 博 新 媒体 广告 设计 


接 下 来 ， 笔 者 选取 几 个 最 方便 展示 商家 优势 与 特点 的 几 个 点 来 做 案例 示范 ， 包 括 微 博 头 像 、 微 博 
主 图 与 微 博 广告 。 微 博 头像 与 微 博 主 图 是 最 常 出 现在 用 户 眼中 的 ， 所 以 一 定 要 用 好 ; 微 博 广告 只 要 设 
计 好 后 ， 再 付 一 定 的 费用 ， 也 可 以 推送 到 用 户 观看 的 微 博 中 。 


10.2.1 微 博 LOGO 设 计 


在 制作 微 博 LOGO 时 ， 先 运用 渐变 工具 绘制 出 背景 和 标志 主体 ， 运 用 画笔 工具 添加 适当 光 点 ， 再 
添加 环形 素材 与 文字 ， 最 后 放 入 界面 中 ， 即 可 完成 制作 。 
本 实例 的 最 终 效果 如 图 10-13 所 示 。 
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图 10-13 ”实例 效果 


9 STEP 01 单 击 “ 文 件 ”|“ 新 建 ” 命 令 ， 人 @ 弹 出 “新 建文 档 ” 对 话 框 ， @ 设 置 “ 名 称 ” 为 “ 微 博 LOGO 
设计 ”、“ 宽 度 ” 为 1000 像 素 、“ 高 度 ” 为 750 像 素 、“ 分 辨 率 ” 为 300 像 素 /英寸 、“ 颜 色 模式 ”为 
"RGB 颜色”、“ 背 景 内 容 ” 为 “白色 ”， 合 单 击 “创建 ”按钮 ， 如 图 10-14 所 示 ， 新 建 一 个 空白 图 像 。 

9 STEP 02 展开 “图 层 ” 面 板 ， 新建“ 图 层 1” 图 层 ， 如 图 10-15 所 示 。 


ma 志 
OO 由 | 到 下 | 中 芭 本 到 

nm PH ~@TnNA® 
正常 ~ 不 透明 度 : 100% ~ 


钙 : 四 J 中 村 和 填 刘 ;100% ~ 
- 自 


所 D8 日 全 
图 10-14 设置 各 选项 图 10-15 新 建 “ 图 层 1” 图 层 
9 STEP 03 选取 工具 箱 中 的 渐变 工具 ， 各 设置 左边 色 标 的 颜色 为 青色 ( RGB 参 数值 为 0、255、255 ) ， 
@ 右 边 色 标的 颜色 为 深蓝 色 ( RGB 参 数值 为 0、73、134 ) ， 如 图 10-16 所 示 。 
9 STEP 04 在 渐变 工具 属性 栏 中 单 击 “ 径 向 渐变 ”按钮 ， 移 动 鼠 标 光标 至 画布 中 心 偏 上 的 地 方 ， 按 住 鼠 
标 左 键 并 向 左下 方 拖 虹 ， 至 合适 位 置 后 释放 鼠标 ， 即 可 填充 渐变 色 ， 效 果 如 图 10-17 所 示 。 
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袁 设 i 
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图 10-16 设置 色 标 颜色 图 10-17 填充 渐变 色 
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@ STEP 05 选取 椭圆 选 框 工具 ， 按 住 Shift+Alt 组 合 键 的 同时 ， 在 图 像 编 辑 窗口 中 创建 一 个 正 圆 形 选 
效果 如 图 10-18 所 示 。 
9 STEP 06 新 建 “图 层 2” 图 层 ， 运 用 渐变 工具 为 图 层 填 充 RGB 参 数值 分 别 为 白色 ( RGB 参数 值 均 为 
255 ) 至 黄色 ( RGB 参 数值 分 别 为 255、240、0 ) 的 径 向 渐变 色 ， 再 按 CtrlHD 组 合 键 取消 选区 ， 效 果 如 


图 10-19 所 示 。 
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填充 | 


图 10-18 创建 圆 形 选区 图 10-19 取消 选区 
9 STEP 07 展开 “图 层 ” 面板， 选择 “图 层 2” 图 层 ， 按 住 鼠 标 左 键 并 将 其 拖 蝶 至 “图 层 ” 面 板 下 方 的 
“创建 新 图 层 ” 按 钮 上 ， 如 图 10-20 所 示 ， 释 放 鼠 标 左 键 ， 即 可 得 到 “图 层 2 拷贝 ”图 层 。 
9 STEP 08 按 Ctrl+T 组 合 键 ， 调 出 变换 控制 框 ， 按 住 Shift+Alt 组 合 键 的 同时 ， 等 比例 从 中 心 点 缩小 图 
像 ， 如 图 10-21 所 示 。 
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° [J 2 ol 
图 10-20 拖 役 图 层 至 按钮 上 图 10-21 等 比例 从 中 心 缩小 图 像 
9 STEP 09 按 Enter 键 确认 变换 ， 再 设置 “图 层 2 拷贝 ”图 层 的 混合 模式 为 “ 滤 色 ”， 如 图 10-22 所 示 。 
9 STEP 10 继续 设置 “图 层 2 拷贝 ”图 层 的 “不 透明 度 ”为 80%， 效 果 如 图 10-23 所 示 。 
9 STEP 11 选取 画笔 工具 ， 展 开 “ 画 笔 ”面板 ， 选 择 “画笔 笔尖 形状 ”选项 ， 设 置 “大 小 ”为 15 像 素 、 
“硬度 ”为 0、“ 间 距 ” 为 250%， 如 图 10-24 所 示 。 


pe "| 
|， 画笔 预 设 : 单 击 该 按钮 ， 可 以 打开 “画笔 预 设 ”面板 。 


”> 锁定 /未 锁定 锁定 或 未 锁定 画笔 笔尖 形状 。 
> 画笔 描 边 预览 : 可 预览 选择 的 画笔 笔尖 形状 。 

”> 切换 硬 毛 刷 画笔 预 设 : 使 用 毛 刷 笔尖 时 ， 显 示 笔尖 样式 。 

”> 选中 的 画笔 笔尖 : 显示 当前 选择 的 画笔 笔尖 。 

| > 画笔 参数 选项 : 显示 了 Photoshop 提 供 的 预 设 画笔 笔尖 。 

”> 打开 预 设 管理 器 : 可 以 打开 “ 预 设 管理 器 ”对 话 框 。 
”> 创建 新 画笔 :对 预 设 画笔 进行 调整 ， 可 以 单 击 该 按钮 ， 可 将 其 保存 为 一 个 新 的 预 设 画 笔 。 | 


ey 图 日 


国力 05 设置 混合 模式 图 10-23 设置 不 透明 度 后 的 效果 图 10-24 设置 各 参数 


9 STEP 12 全 选中 “形状 动态 ” 复 选 框 ， 四 设置 “大 小 抖动 ”为 73%， 而 其 他 参数 均 设置 为 0， 此 时 ， 
面板 下 方 的 预览 框 中 即 可 显示 调整 后 的 画笔 状态 ， 如 图 10-25 所 示 。 

9 STEP 13 各 选中 “散布 ” 复 选 框 ， 四 设置 “散布 ”为 1000%、“ 数 量 ” 为 1、“ 数 量 抖动 " 为 0， 此 
时 ， 在 面板 下 方 的 预览 框 中 可 显示 调整 后 的 画笔 状态 ， 如 图 10-26 所 示 。 

9 STEP 14 新 建 “ 图 层 3” 图 层 ， 设 置 前 景色 为 和 白色， 在 球体 上 绘制 散布 的 星 点 ， 效 果 如 图 10-27 所 示 。 


ay 回回 ay 图 日 


图 10-25 ”显示 调整 后 的 画笔 状态 。 图 10-26 显示 调整 后 的 画笔 状态 


Se i 1 
匡 二 > 散布 /两 轴 ”: “散布 ”用 来 设置 画笔 笔 这 的 分 散 程 度 ， 该 信 越 高 ， 分 散 的 


范围 越 广 。 如 果 选 中 “两 轴 ” 复 选 框 ， 画 笔 笔 迹 将 以 中 间 为 基准 ， 向 两 侧 ， 
: 分 散 。 : 
”> “数量 ”: 用 来 指定 在 每 个 间距 间隔 应 用 的 画笔 笔迹 数量 。 

”> “数量 料 动 /控制 ”: 用 来 指定 画笔 笔迹 数量 如 何 针对 各 种 问 中 间隔 而 变化 。 


图 10-27 绘制 星 


9 STEP 15 按 Ctri+O 组 合 键 ， 打 开 “ 装 饰 .psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 中 至 背景 图 像 纺 
辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 10-28 所 示 。 
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9 STEP 16 设置 前 景色 为 和 白色， 双击 “图 层 4” 图 层 ， 弹 出 “图 层 样 式 ” 对 话 框 ， 选 中 “光泽 ” 复 选 
框 ， 设 置 “效果 颜色 ”为 青色 ( RGB 参 数值 分 别 为 0、186、209 ) ， 如 图 10-29 所 示 。 
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图 10-28 扼 曼 图 像 图 10-29 设置 RGB 参 数 
9 STEP 17 @ 设 置 “ 不 透明 度 ” 为 0%、“ 角 度 ”为 90 度 、“ 距 离 ” 为 17、“ 大 小 ”为 24，@ 单 击 等 高 
线 预 览 图 右 侧 的 下 拉 按 钮 ， 全 在 展开 的 下 拉 列 表 框 中 选择 “环形 - 双 ” 样 式 ， 如 图 10-30 所 示 。 
9 STEP 18 设置 完毕 后 单 击 “ 确 定 ” 按 钮 ， 即 可 为 图 像 添加 “光泽 ”图 层 样 式 ， 效 果 如 图 10-31 所 示 。 


加 选 择 


图 10-30 设置 各 选项 图 10-31 添加 “光泽 ”图 层 样 式 
9 STEP 19 选中 “图 层 4” 图 层 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “拷贝 图 层 样 式 ” 命 令 ， 
粘贴 在 “图 层 4 拷贝 ”图 层 上 ， 效 果 如 图 10-32 所 示 。 
9 STEP 20 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 综艺 简体 ”、 
“字体 大 小 ”为 14 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 200、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 为 
255 ) ， 如 图 10-33 所 示 。 
9 STEP 21 在 图 像 编辑 窗口 中 输入 文字 ， 并 移 至 适当 位 置 ， 如 图 10-34 所 示 。 
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图 10-32 ”粘贴 图 层 样 式 图 10-33 设置 各 选项 图 10-34 输入 文字 
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9 STEP 22 双击 文字 图 层 ， 打 开 “ 图 层 样式 ”对 话 框 ， 选 中 “投影 ” 复 选 框 ， 设 置 “投影 颜色 ”为 深蓝 
色 ( RGB 参 数值 分 别 为 0、43、108 ) 、“ 不 透明 度 ” 为 73%、 “角度 ”为 90、“ 距 离 ” 为 6 像素 、“ 扩 
展 ” 为 0(、“ 大 小 ”为 2 像素 ， 单 击 “ 和 确定 ”按钮 ， 即 可 为 文字 添加 “投影 ”图 层 样式 ， 效 果 如 图 
10-35 所 示 。 

9 STEP 23 选取 工具 箱 中 的 横 排 文 字 工具 ， 设 置 “字体 系列 ”为 “华文 中 宋 ”、 “字体 大 小 ”为 9 点 、 
“设置 所 选 字符 的 字 距 调整 ”为 100、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 并 激活 仿 粗 体 图 标 ， 
在 图 像 编辑 窗口 中 输入 相应 文本 ， 如 图 10-36 所 示 。 
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图 10-35 添加 “投影 ”图 层 样式 图 10-36 输入 文字 
9 STEP 24 双击 文字 图 层 ， 打 开 “ 图 层 样 式 ” 对 话 框 ， 选 中 “投影 ” 复 选 框 ， 设 置 “不 透明 度 ” 为 
100%、“ 距 离 ” 为 4 像素 、“ 扩 展 ” 为 0、“ 大 小 ”为 2 像素 ， 单 击 “ 确 定 ” 按 钮 ， 即 可 为 文字 添加 
“投影 ”图 层 样 式 ， 如 图 10-37 所 示 。 
9 STEP 25 按 Shift+Ctrl+Alt+E 组 合 键 ， 盖 印 可 见 图 层 ， 得 到 “图 层 3” 图 层 ， 如 图 10-38 所 示 。 


图 层 各 
PE veoerna® 
正常 v| 韦 肖 明度 ; 100% | ~ 
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图 10-37 添加 “投影 ”图 层 样 式 图 10-38 ”得 到 “图 层 5” 图 层 


9 STEP 26 选取 工具 箱 中 的 椭圆 选 框 工具 ， 在 图 像 编辑 窗口 中 绘制 一 个 椭圆 选区 ， 效 果 如 图 10-39 所 示 。 

9 STEP 27 按 Ctl+O 组 合 键 ， 打 开 “ 微 博 界 面 1jpg” 素 材 图 像 ， 如 图 10-40 所 示 。 

9 STEP 28 切换 至 “ 微 博 LOGO 设 计 ” 图 像 编辑 窗口 ， 选 取 工 具 箱 中 的 移动 工具 ， 将 选区 内 的 图 像 拖 中 
至 “ 微 博 界 面 1” 图 像 编辑 窗口 中 ， 适 当 调 整 图 像 的 大 小 和 位 置 ， 如 图 10-41 所 示 。 

9 STEP 29 双击 “图 层 1” 图 层 ， 打 开 “ 图 层 样 式 ” 对 话 框 ， 选 中 “ 描 边 ” 复 选 框 ,设置 “大 小 ”为 6 像 
素 、“ 位 置 ” 为 “外 部 ”、“ 不 透明 度 ” 为 50%、 “颜色 ”为 白色 ( RGB 参数 值 均 为 255 ) ， 如 
图 10-42 所 示 。 

9 STEP 30 选中 “投影 ” 复 选 框 ， 设 置 “不 透明 度 ” 为 34%、“ 角 度 ” 为 90、“ 距 离 ” 为 10 像 素 、“ 扩 
展 ” 为 0、“ 大 小 ”为 10 像 素 ， 单 击 “确定 ”按钮 ， 即 可 添加 图 层 样式 ， 如 图 10-43 所 示 。 
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图 10-42 设置 各 选项 图 10-43 添加 图 层 样式 


10.2.2 ” 微 博 主 图 设计 


在 制作 微 博 主 图 时 ， 先 为 背景 填充 纯色 ， 再 运用 多 边 形 套 索 工具 绘制 选区 填充 手机 屏幕 ， 并 抠 取 
图 像 ， 再 输入 相应 信息 ， 最 后 将 图 像 拖 中 至 微 博 界 面 即 可 完成 设计 。 
本 实例 的 最 终 效果 如 图 10-44 所 示 。 
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图 10-44 ”实例 效果 
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素材 文件 | 素材 \ 第 10 章 \ 手 机 jpg、 微 博 界 面 2.jpg 
+ | 效果 文件 。 “| 效果 \ 第 10 章 \ 微 博 主 图 设计 .psd、 微 博 主 图 设计 .jpg 


视频 文件 10.2.2 微 博 主 图 设计 .mp4 


。 STEP 01 单 击 “ 文 件 " | “新建 ”命令 ， 人 @ 弹 出 “新 建文 档 ” 对 话 框 ，@ 设 置 “ 名 称 "为 “人 微 博 主 图 设 
计 ”、 “宽度 "为 500 像 素 、“ 高 度 ”为 500 像 素 、“ 分 辨 率 ” 为 300 像 素 /英寸 、 “颜色 模式 " 为 “RGB 

颜色 ”、“ 背 景 内 容 ”为 “白色 ”， 人 @ 单 击 “ 创 建 ”按钮 ， 如 图 10-45 所 示 ， 新 建 一 个 空白 图 像 。 

。 STEP 02 展开 “图 层 ” 面板， 新 建 “图 层 1” 图 层 ， 设 置 前 景色 为 浅 灰色 ( RGB 参数 值 均 为 238 ) ， 为 


“图 层 1” 图 层 填 充 前 景色 ， 如 图 10-46 所 示 。 
@@ 设 置 F | “ 
回 半 去 | ”>cD 填充 
图 10-45 设置 各 选项 图 10-46 填充 前 景色 


9 STEP 03 按 Ctrl+O 组 合 键 ， 打 开 “ 手 机 jpg” 素材 图 像 ， 如 图 10-47 所 示 。 
9 STEP 04 选取 工具 箱 中 的 多 边 形 套 索 工 具 ， 沿 手机 屏幕 创建 一 个 选区 ， 如 图 10-48 所 示 。 
9 STEP 05 设置 前 景色 为 黑色 ( RGB 参数 值 均 为 0 ) ， 为 选区 填充 前 景色 并 取消 选区 ， 效 果 如 图 10-49 所 示 。 


图 10-47 素材 图 像 图 10-48 创建 选区 图 10-49 填 
9 STEP 06 按 Ctrl+J 组 合 键 ， 复 制 “ 背 景 ”图 层 ， 人 @ 得 到 “图 层 1” 图 层 ， 合 并 隐藏 “背景 ”图 层 ， 如 图 


10-50 所 示 。 


复制 图 层 的 方法 有 很 多 种 ， 下 面 介 绍 两 种 常用 的 方法 。 | 
选择 需要 复制 的 图 层 ， 将 其 拖 虚 至 “图 层 ”面板 下 方 的 “创建 新 图 层 ”按钮 
上 ， 释 放 鼠 标 左 键 即 可 复制 图 层 。 | 
i > 在 要 复制 的 图 层 的 文字 处 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “复制 图 层 ” 命 令 ， 弹 出 : 


i 专 家 指点 
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9 STEP 07 选取 工具 箱 中 的 魔 棒 工 具 ， 在 工具 属性 栏 中 设置 “ 容 差 ” 为 10， 在 图 像 的 背景 区 域 单 击 鼠 标 
左 键 ， 创 建 选区 ， 如 图 10-51 所 示 。 
e@STEP 08 按 Delete 键 ， 删 除 选 区 内 的 图 像 ， 并 取消 选区 ， 效 果 如 图 10-52 所 示 。 
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图 10-52 ”删除 图 像 并 取消 选区 


记 口 8. 哲 日 全 


图 10-50 ”隐藏 “背景 ”图 层 图 10-51 


上 如 果 抠 取 的 对 象 边 缘 比 较 清 晰 ， 也 可 以 用 磁性 套 
柜 浊 筷 ， 索 来 抠 取 。 在 工具 箱 中 选择 磁性 套 索 工具 ， 在 图 像 纺 出 现 鳃 点 
辑 窗 口中 的 适当 位 置 单 击 刀 标 左 键 ， 然 后 沿 图 像 边缘 拖 昌 ， 图 像 边 
会 出 现 一 些 错 点 ， 如 图 10-53 所 示 ， 至 起 始点 后 ， 再 次 单 击 鼠 标 左 键 ， 
即 可 创建 选区 . PT 


9 STEP 09 运用 移动 工具 将 素材 图 像 拖 折 至 背景 图 像 编 辑 窗口 中 ， 适 当 调整 图 像 的 大 小 和 位 置 ， 效 果 如 

图 10-54 所 示 。 

e@STEP 10 选取 工具 箱 中 的 横 排 文 字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 细 圆 简体 ”、 
字体 大 小 ”为 5 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 100、“ 颜 色 ” 为 灰色 ( RGB 参 数值 均 为 94 ) ， 

并 激活 仿 粗 体 图 标 ， 在 图 像 编 辑 窗口 中 输入 文字 ， 如 图 10-55 所 示 。 

9 STEP 11 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “微软 雅 黑 ”、“ 字 
体 大 小 ”为 9.5 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 100、“ 颜 色 ” 为 橙色 ( RGB 参 数值 分 别 为 249、 
55、0 ) ， 在 图 像 编 辑 窗口 中 输入 文字 ， 如 图 10-56 所 示 。 
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1 关 4,299 起 
输入 
输入 
拖 踊 玉 > 
> & 2 . < 少 
图 10-54 拖 旭 图 像 图 10-55 输入 文字 图 10-56 输入 文字 


9 STEP 12 选中 “¥” 符 号 ， 在 “字符 ”面板 中 激活 上 标 图 标 ， 如 图 10-57 所 示 。 


的 | 


9 STEP 13 选中 


es 和文 toner 


“起 ”文字 ,设置 “字体 大 小 ”为 5 点 ， 
9 STEP 14 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 
“设置 所 选 字符 的 字 距 调整 ”为 150、 


文字 是 多 数 设计 作品 尤其 是 商业 作品 中 不 可 或 的 重要 元 素 ， 有 时 基于 在 作品 


中 起 着 主导 作用 。Photoshop 除 了 提供 丰富 的 文字 属性 设计 及 版 式 纺 
以 便 创作 出 更 多 、 更 丰富 的 文字 效果 。 


效果 如 图 10-58 所 示 。 
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体 ”、“ 字 体 大 小 ”为 4 点 、 
0 ) ， 并 激活 仿 粗 体 图 标 ， 在 图 像 编辑 窗口 中 输入 文字 ， 如 图 10-59 所 示 。 
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图 10-57 激活 上 标 图 标 图 10-58 设置 


9 STEP 15 选中 除 “背景 ” 图 


图 10-60 所 示 。 


具 将 图 
10-61 所 示 。 
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10.2.3 微 博 广告 设计 


在 制作 微 博 广告 时 ， 先 打开 并 拖 电 素 材 


参数 


9 STEP 16 按 Ctrl+O 组 合 键 ， 打 开 “ 微 博 界面 2jpg” 素 材 图 像 ， 切 换 至 背景 图 像 编辑 窗口 ， 运 
层 组 的 图 像 拖 点 至 “ 微 博 界面 2” 图 像 编 辑 窗口 中 ， 


适当 调整 图 像 的 


+ 过 


图 10-61 拖 旬 图 像 


图 像 拖 电 至 微 博 界面 中 ， 即 可 完成 设计 。 


色 ( RGB 参数 值 均 为 


“字体 大 小 ” 
层 外 的 所 有 图 层 ， 按 Ctrl+G 组 合 键 ， 为 图 层 编组 ， 得 


图 10-59 ”输入 文字 


到 “组 1” 图 层 组 ， 如 


移动 工 
大 小 和 位 置 ， 效 果 如 


像 ， 调 整 图 像 的 亮度 ， 输 入 相应 的 商品 信息 ， 最 后 再 将 
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本 实例 的 最 终 效 果 如 图 10-62 所 示 。 
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图 10-62 实例 效果 


素材 文件 | 素材 第 10 章 \ 广 告 背景 jpg、 文 字 .psd、 微 博 界面 3jpg 
在 效果 文件 “| 效果 第 10 章 \ 微 博 广告 设计 .psd、 微 博 广告 设计 jpg 


9 STEP 01 单 击 “ 文 件 ”| “新建 ”命令 ，@ 弹 出 “新 建文 档 ” 对 话 框 ， 全 设置 “名 称 ” 为 “ 微 博 广告 设 
计 ”、“ 宽 度 ” 为 1008 像 素 、“ 高 度 ” 为 567 像 素 、“ 分 辨 率 ” 为 300 像 素 / 英 寸 、“ 颜 色 模式 ”为 “RGB 
颜色 ”、“ 背 景 内 容 ” 为 “白色 ”， 合 单 击 “ 创 建 ” 按 钮 ， 如 图 10-63 所 示 ， 新 建 一 个 空白 图 像 。 

9 STEP 02 按 Ctrl+O 组 合 键 ， 打 开 “ 广 告 背景 jpg” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 卸 至 背景 图 
像 编辑 窗口 中 ， 适 当 调整 图 像 的 位 置 ， 效 果 如 图 10-64 所 示 。 


"ED 


图 10-63 设置 各 选项 

9 STEP 03 单 击 “ 图 像 ”|“ 调 整 ” |“ 曲线 ”命令 ， 弹 出 “曲线 ”对 话 框 ， 在 曲线 上 单 击 鼠标 左 键 新 建 
一 个 控制 点 ， 设 置 “ 输 入 ”为 117、“ 输 出 ”为 1530， 单 击 “ 确 定 ”按钮 ， 效 果 如 图 10-65 所 示 。 

9 STEP 04 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 粗 倩 简体 ”、 
“字体 大 小 ”为 22 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 100、“ 颜 色 ” 为 红色 ( RGB 参数 值 分 别 为 
184、10、3 ) ， 并 激活 仿 粗 体 图 标 ， 在 图 像 编 辑 窗口 中 输入 文字 ， 如 图 10-66 所 示 。 

© STEP 05 选取 工具 箱 中 的 矩形 选 框 工具 ， 在 图 像 编辑 窗口 中 的 适当 位 置 绘 制 一 个 矩形 选 框 ， 如 图 10-67 所 示 。 
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9 STEP 06 单 击 工具 箱底 部 的 前 景色 色 块 ，@ 弹 出 “ 拾 色 器 ( 前 景色 ) ”对 话 框 ，@ 设 置 前 景色 为 红色 
(RGB 参数 值 分 别 为 184、10、3 ) ， 全 单 击 “ 确 定 ” 按 钮 ， 如 图 10-68 所 示 。 


图 10-67 ppp 图 10-68 输入 文字 

9 STEP 07 新 建 图 层 ， 单 击 “ 编 辑 ”| “填充 ”命令 ， 禹 弹出 “填充 ”对 话 框 ， 四 设置 “内 容 ” 为 “前 景 
色 ”， 如 图 10-69 所 示 。 

9 STEP 08 单 击 “确定 ”按钮 ， 即 可 为 选区 填充 红色 ， 按 Ctrl+D 组 合 键 取消 选区 ， 效 果 如 图 10-70 所 示 。 


不 透明 度 (0): 100 
_ 保留 透明 区 域 (P) 


图 10-69 ” 设置“ 内容” 选项 | 图 10-70 | 取消 选区 

9 STEP 09 选取 工具 箱 中 的 横 排 文 字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 
小 ”为 6 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 100、“ 颜 色 ” 为 白色 ( RGB 参 数值 均 为 255 ) ， 在 图 像 
编辑 窗口 中 输入 文字 ， 如 图 10-71 所 示 。 

9 STEP 10 在 “字符 ”面板 中 全 设置 “字体 系列 ”为 “方正 兰亭 黑 GBK”、“ 字 体 大 小 ”为 6 点 、“ 设 
置 所 选 字符 的 字 距 调整 ”为 -25、“ 颜 色 ” 为 红色 ( RGB 参 数值 分 别 为 184、10、3 ) ， 四 并 激活 仿 粗 
体 与 下 划 线 图 标 ， 如 图 10-72 所 示 。 

9 STEP 11 在 图 像 编辑 窗口 中 输入 文字 ， 并 适当 调整 其 位 置 ， 如 图 10-73 所 示 。 

© STEP 12 按 Ctrl+O 组 合 键 ， 打开 “文字 psd” 素 材 图 像 ， 运 用 移动 工具 将 图 像 拖 遇 至 背景 图 像 编辑 窗 
口中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 10-74 所 示 。 
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图 10-71 输入 文字 图 10-72 设置 各 选项 


图 10-73 输入 文字 图 10-74 抱负 图像 

9 STEP 13 选中 除 “ 篆 景 ” 图 层 外 的 所 有 图 层 ， 按 Ctrl+G 组 合 键 ， 为 图 层 编组 ， 得 到 “组 1” 图 层 组 ， 如 
图 10-75 所 示 。 

9 STEP 14 按 Ctri+O 组 合 键 ， 打开“ 微 博 界面 3.jpg” 素 材 图 像 ， 切 换 至 背景 图 像 编辑 窗口 ， 运 用 移动 工 


具 将 图 层 组 的 图 像 拖 息 至 “ 微 博 界面 39” 图 像 编辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 10-76 
所 示 。 
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图 10-75 得 到 “组 1” 图 层 组 图 10-76 拖 提 图 像 


“ 微 课 ”的 核心 组 成 内 容 是 课堂 教学 视频 ( 课 例 片 段 )， 同 时 还 包含 与 该 教 
学 主题 相关 一 些 内 容 。 它 们 以 一 定 的 组 织 关 系 和 呈现 方式 共同 “营造 ”了 一 
个 半 结 构 化 、 主 题 式 的 资源 单元 应 用 “小 环境 ”， 它 是 一 种 新 型 教学 


微 课 的 构思 设计 要 点 微 课 讲 师 页 设计 
微 课 的 内 容 设计 要 点 微 课 课 程 页 设计 
微 课 的 版 式 设计 要 点 微 课 推广 页 设计 


a A 手机 拍 景深 虚 化 效果 
E> TBET 自 4 10 层 境界 从 人 门 到 精通 


区 在 更 加 记 出 。 
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b> 一 位 构图 专家 

b> 单 点 极致 尖刀 思维 

> 原创 300 多 篇 构图 文章 
b> 提炼 500 多 种 构图 技法 
> 细 化 100 多 种 构图 方法 


扫 码 可 关注 
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前 期 准备 : 微 课 新 媒体 设计 要 点 


可 


微 课 与 传统 的 教学 课 例 、 教 学 课件 、 教 学 设计 、 教 学 反思 等 教学 资源 不 
的 小 片段 来 教学 ， 相 较 于 传统 的 教学 精准 性 更 高 ， 学 生 吸 收 更 快 。 本 节 主 要 
计 要 点 。 


， 它 的 重点 是 选取 重要 
读者 介绍 微 课 新 媒体 设 


EE] 


11.1.1 微 课 的 构思 设计 要 点 


微 课 的 构思 设计 是 微 课 开发 制作 的 基础 ， 也 是 整个 微 课 开发 与 制作 的 决定 性 基石 和 展现 个 人 魅力 
的 必要 条 件 。 一 个 教师 的 微 课 授课 能 否 获得 学 生 和 家 长 的 广泛 认可 、 获 得 教育 机 构 的 赞赏 ， 在 构思 设 
计 这 一 块 非常 重要 。 
下 面 以 图 解 的 形式 向 读者 介绍 微 课 构思 设计 的 3 大 主要 方面 ， 如 图 11-1 所 示 。 
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图 11-1 微 课 构 思 设 计 的 3 大 主要 方面 


11.1.2” 微 课 的 内 容 设 计 要 点 


内 容 设 计 也 称 为 脚本 设计 ， 它 是 微 课 制作 设计 的 主要 表现 ， 在 微 课 中 的 脚本 主要 是 指 课程 设计 所 
依据 的 底 本 ， 也 就 是 根本 内 容 ， 选 题 就 属于 脚本 中 最 基础 的 一 部 分 。 对 成 系列 化 的 微 课 课程 而 言 ， 通 
过 脚本 文档 或 设计 图 的 方式 将 制作 内 容 固定 下 来 是 很 有 必要 的 ， 能 够 节省 不 少 的 时 间 ， 也 是 防止 其 他 
微 课 课程 内 容 跑题 的 重要 方面 。 

在 实际 的 脚本 设计 中 ， 根 据 相关 的 设计 程序 ， 
能 够 更 好 地 完成 微 课 课程 的 脚本 。 下 面 以 图 片 的 形 
式 向 读者 展示 最 常见 的 设计 软件 页 面 内 容 ， 如 图 11-2 
所 示 。 

需要 注意 的 是 ， 微 课 是 将 知识 可 视 化 的 一 种 表 
现 方式 ， 使 原本 抽象 的 东西 变 得 立体 ， 从 而 让 知识 
更 容易 被 接受 。 能 够 在 课程 中 有 效 地 做 到 知识 可 视 
化 ， 那 么 在 设计 方面 就 是 已 经 比较 完善 的 了 。 在 被 
认可 的 常用 知识 可 视 化 工具 中 ， 主 要 有 5 种 。 下 面 图 11-2 ”常见 的 课程 设计 软件 页 面 内 容 
以 图 解 的 形式 向 读者 具体 介绍 这 5 种 常用 可 视 化 工具 ， 如 图 11-3 所 示 。 

实际 完成 的 脚本 中 包括 的 表现 形式 有 很 多 ， 如 文字 、 声 音 、 图 像 、 动 画 、 视 频 等 多 个 因素 。 另 
外 ， 脚 本 又 分 为 文字 脚本 和 制作 脚本 。 文 字 脚 本 是 按照 教学 过 程 的 先后 顺序 描述 每 一 个 环节 的 内 容 及 


2 人 


其 呈现 方式 的 一 种 形式 。 制 作 脚本 包含 着 学 习 者 将 要 在 视频 屏幕 上 看 到 的 细节 ， 比 如 人 物 形象 、 相 关 
物件 等 方面 。 


概念 图 _ ”概念 图 通常 是 将 某 一 主题 的 有 关 概念 置 于 圆圈 或 方 框 
之 中 ， 然 后 用 连 线 和 连接， 表达 意思 


思维 导 图 。 。 思维 导 图 主要 是 在 传统 的 笔记 方法 上 的 创新 ， 昌 前 借 
助 网 络 技术 ， 已 经 有 很 广泛 的 影响 力 


EI 。 思维 地 图 “包括 8 个 方面 : 括 弧 图 、 桥 接 图 、 起 泡 图 、 国 图 图 、 
IAA 国 呈 双 起 泡 图 、 流 程 图 、 复 流程 图 和 树 状 图 


认 知 地 图 a sd 它们 大 


其 定义 为 节点 和 连接 组 成 的 网 络 ， 有 连接 词 但 不 严格 
语义 网 络 “限制 在 层次 结构 上 


图 11-3 5 种 常用 可 视 化 工具 


11.1.3 ” 微 课 的 版 式 设计 要 点 


版 式 设计 是 视觉 传达 的 重要 手段 ， 在 微 课 课程 的 成 功 要 素 中 占据 重要 位 置 ， 对 整个 课程 的 设计 影 
响 极 大 。 

在 以 往 的 版 面 设计 中 ， 需 要 对 材料 内 容 信息 进行 分 解 ， 先 进行 总 体 版 面 分 配 ， 再 对 文字 、 图 形 进 
行 编排 ， 使 图 与 文 、 图 与 图 、 文 与 文 相互 呼应 、 相 互 协调 。 在 微 课 课程 的 版 面 设计 中 有 所 不 同 ， 但 是 
整体 上 版 面 设计 的 要 求 是 大 致 一 样 的 。 

从 课件 设计 的 需求 而 言 ， 大 部 分 制作 者 了 解 较 为 常见 的 技巧 就 足够 了 ， 只 有 专业 方面 人 士 才 需 要 
对 相关 的 设计 法 则 进行 全 面 了 解 。 一 般 常 见 的 设计 技巧 主要 包括 6 个 方面 。 下 面 以 图 解 的 形式 向 读者 
介绍 课件 版 面 设计 技巧 的 6 个 主要 方面 ， 如 图 11-4 所 示 。 


四 于 一 识 件 的 表达 内 容 是 必须 明确 的 ， 才 能 够 让 学 习 者 更 好 地 获得 知识 ， 对 内 容 进行 
| 一 主 从 关系 的 分 清 ， 是 更 好 地 完成 版 面 设计 的 一 个 方面 


| 一 改 。 通过 下 划 线 、 增 大 字体 、 改 变 颜色 或 者 增加 底 色 的 方式 突出 中 心 内 容 ， 通 过 强 
一 > 


调 来 提高 学 习 者 的 注意 力 ， 便 于 其 知识 记忆 


国生 现 册 窜 所 点 用 的 面积 训 是 版 面 ， 版 面 则 是 指 版 面 和 整 页 面积 的 比例 ， 安 和 
| | 一 > 部分 的 多 少 影响 学 习 者 对 于 版 面 的 感觉， 不 能 没有 空白 ， 也 不 能 太 多 空白 


| 因 二 是 由 一、 国文 的 方式 是 大 众 最 容易 接受 的 , 同时 图 文 表达 的 内 容 也 更 为 简 法 , 不 会 出 现 太 多 
> 的 皮条 内 容 , 对 于 突出 中 心 内 容 的 作用 是 很 直接 的 
| Fe [> 不 同 的 线条 图 形 合理 的 搭配 , 能 够 让 整个 图 形 看 起 来 更 加 让 人 感觉 愉悦 , 同时 也 容 
| 一 易 对 相关 的 内 容 进行 突出 处 理 ,以 便 知识 点 的 教学 


”如 金字 塔 图 、 柱状 图 、 圆 饼 图 、 流程 图 等 , 能 够 在 表现 形式 上 更 为 生动 
图 11-4 课件 版 面 设计 技巧 的 6 个 主要 方面 


| 使 用 图 表 > 图 表 的 作用 与 线条 搭配 的 作用 类 似 , 但 是 使 用 图 表 能 够 额外 起 到 一 种 装饰 的 作用 ， 
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国 网 | 康 例 实战 : 微 课 宣 传 广告 设计 


微 课 的 教学 内 容 较 少 且 短 ， 一 般 只 有 5 一 8 分 钟 左右 ， 所 以 微 课 的 主题 更 加 的 突出 与 精简 。 微 课 已 
经 成 为 一 种 热门 的 教学 方式 。 本 节 主 要 选取 微 课 讲师 页 、 微 课 课 程 页 和 微 课 推广 页 来 做 案例 分 析 。 


11.2.1 微 课 讲师 页 设计 
在 制作 微 课 讲师 页 时 ， 先 运用 滤 镜 制作 出 有 纹理 效果 的 背景 ， 再 添加 相应 的 素材 与 人 物 ， 最 后 加 
上 适当 的 文字 即 可 完成 设计 。 

本 实例 的 最 终 效 果 如 图 11-5 所 示 。 
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图 11-5 ”实例 效果 


素材 文件 “| 素材 第 11 章 \ 装 饰 .png、 讲 师 .psd、 标 志 1.png 
效果 文件 | 效果 \ 第 11 章 \ 微 课 讲师 页 设计 .psd、 微 课 讲师 页 设计 jpg 


视频 文件 11.2.1 微 课 讲 师 页 设计 .mp4 


9 STEP 01 按 Ctrl+N 组 合 键 ， 人 @ 弹 出 “新 建文 档 ” 对 话 框 ,人 @ 设 置 “ 名 称 ” 为 “ 微 课 讲师 页 设计 ”、“ 宽 
度 ” 为 1080 像 素 、“ 高 度 ” 为 1920 像 素 、“ 分 辨 率 ” 为 300 像 素 /英寸 、“ 颜 色 模式 ”为 “RGB 颜色 ”、 
“背景 内 容 ” 为 “白色 ”，@ 单 击 “ 创 建 ” 按 钮 ， 如 图 11-6 所 示 ， 新 建 一 个 空白 图 像 。 


OF ee 


2 加 |O 单 >@ Ca 
图 11-6 设置 各 选项 


9 STEP 02 展开 “图 层 ” 面 板 ， 新 建 “ 图 层 1” 图 层 ， 如 图 11-7 所 示 。 

9 STEP 03 设置 前 景色 为 浅 灰色 ( RGB 参数 值 均 为 217 ) ， 为 “图 层 1” 图 层 填充 前 景色 ， 如 图 11-8 所 示 。 

9 STEP 04 单 击 “ 滤 镜 ”|“ 杂 色 ”|“ 添 加 杂 色 ”命令 ， 和 弹出 “添加 杂 色 ”对 话 框 ， 外 设置 “数量 ” 
为 10%， 选 中 “高 斯 分 布 ” 单 选 按钮 和 “ 单 色 ” 复 选 框 ， 四 单 击 “ 确 定 ”按钮 ， 如 图 11-9 所 示 ， 为 图 
像 添加 杂 色 。 
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图 11-7 新 建 “ 图 层 1” 图 层 图 11-8 填充 前 景色 图 11-9 添加 杂 色 


PR 一 >】 。 “ 杂 色 ” 尖 针 添加 或 去 来 色 或 戎 有 随机 分 布 色 阶 的 像素 ， 这 有 助 于 将 和 区 混 
| 才 家 指点 ， 合 到 周 轩 的 像素 中 ，“ 杂 色 ” 滤 镜 可 以 创建 与 众 不 同 的 纹理 或 移 去 有 问题 的 区 域 ， 
， 如 灰尘 和 划 泪 。 


9 STEP 05 单 击 “ 滤 镜 ”|“ 模 糊 ”|“ 动 感 模糊 ”命令 ，@ 弹 出 “动感 模糊 ”对 话 框 ，@ 设 置 “ 角 度 ” 
为 90 度 、“ 距 离 ” 为 2000 像 素 ， 如 图 11-10 所 示 。 
9 STEP 06 单 击 “确定 ”按钮 ， 即 可 应 用 “动感 模糊 ” 滤 镜 ， 效 果 如 图 11-11 所 示 。 


图 11-10 设置 各 选项 图 11-11 应 用 “动感 模糊 滤 镜 


下 二- “动感 模 机 ”可 以 要 据 旬 作 牙 果 的 需要 沿 指 定 方向 、 以 指定 红 度 机 图 人 
[专家 指点 ) 对 话 框 的 各 主要 选项 含义 如 下 。 

”> “和 角度 ”: 用 来 设置 模糊 的 方向 。 可 以 直接 输入 才 值 ， 也 可 以 拖 动 指针 调整 角度 。 
”> “距离 。， 用 来 设置 像素 移动 的 距离 。 
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9 STEP 07 单 击 “ 滤 镜 ”|“ 渡 镜 库 ” 命 令 ， 打 开 滤 镜 库 ， 人 @ 选 择 “ 调 色 刀 ” 滤 镜 ， 全 并 设置 “ 描 边 大 
小 ”为 38、“ 描 边 细 节 ” 为 2、“ 软 化 度 ” 为 3， 如 图 11-12 所 示 。 
© STEP 08 单 击 “ 确 定 ”按钮 ， 即 可 应 用 “ 调 色 刀 ” 滤 镜 ， 效 果 如 图 11-13 所 示 。 


图 11-12 设置 各 选项 图 11-13 应 用 “ 调 色 刀 ” 滤 镜 
9 STEP 09 单 击 “ 图 像 ”|“ 调 整 ”|“ 曲 线 ”命令 ，@ 弹 出 “曲线 ”对 话 框 ，@ 在 曲线 上 单 击 鼠 标 左 键 
新 建 一 个 控制 点 ， 合 在 下 方 设置 “输入 ”为 95、“ 输 出 ”为 146， 如 图 11-14 所 示 。 
9 STEP 10 单 击 “确定 ”按钮 ， 调 整 图 像 亮度 ， 效 果 如 图 11-15 所 示 。 


显示 数量 : 
© (02550) 


而 树 / 泪 显 %(6) 


氢 设 内 ;| 白 定 


网 本 大 小 : 
国 s 

显示 : 
加 通天 各 (V) 
问 自 方 田 (H) 
© 基线 (3) 
交叉 线 (N) 


图 11-14 设置 各 选项 图 11-15 调整 图 像 亮 度 


ES “曲线 ”命令 调节 曲线 的 方式 ， 可 以 对 图 像 的 亮 调 、 中 间 调 和 暗 调 进行 适当 调 | 

专家 指点 整 ， 而 且 只 对 某 一 范围 的 图 像 进行 色调 的 调整 ， 它 相 较 于 “ 色 阶 ”， 可 以 通过 在 曲 
， 线 上 添加 多 个 控制 点 的 方式 ， 更 加 精准 地 调节 图 像 亮度 。 | 

9 STEP 11 按 Ctrl+O 组 合 键 ， 打开“ 装饰 png” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编 
辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 11-16 所 示 。 

© STEP 12 按 Ctrl+O 组 合 键 ， 打开“ 讲师 .psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 折 至 背景 图 像 编 
辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 11-17 所 示 。 

9 STEP 13 选取 工具 箱 中 的 直 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 粗 圆 简 体 ”、 
“字体 大 小 ”为 21 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 100、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 为 
255 ) ， 如 图 11-18 所 示 。 
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子 符 ”有 洁 交 | 要 


马 
4 
中 
站 a y 美国 英语 ~ a 浑 昌 
图 11-16 拖 复 图 像 图 11-17 拖 旬 图 像 图 11-18 设置 各 选项 


9 STEP 14 在 图 像 编 辑 窗口 中 输入 文字 ， 并 移 至 合适 位 置 ， 效 果 如 图 11-19 所 示 。 

9 STEP 15 选取 工具 箱 中 的 直线 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 填 充 ” 为 蓝 
色 ( RGB 参数 值 分 别 为 2、118、255 ) 、“ 粗 细 ” 为 2 像素 ， 绘 制 一 个 直线 形状 ， 效 果 如 图 11-20 所 示 。 
9 STEP 16 按 Ctrl+O 组 合 键 ， 打 开 “ 标 志 1.png” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编 

辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 11-21 所 示 。 


™ 


7 . 4 Dl 
输入 | 
— 
绘制 
图 11-19 输入 文字 图 11-20 绘制 直线 图 11-21 拖 旨 图 像 


9 STEP 17 选取 工具 箱 中 的 横 排 文 字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “ 汉 仪 鞭 心 体 简 ”、 
“字体 大 小 ”为 21 点 、“ 行 距 ” 为 30、“ 颜 色 ” 为 蓝 色 ( RGB 参 数值 分 别 为 22、118、255 ) ， 在 图 像 
编辑 窗口 中 输入 文字 ， 效 果 如 图 11-22 所 示 。 

9 STEP 18 选取 工具 箱 中 的 直线 工具 ， 在 工具 属性 栏 中 “填充 ”为 蓝 色 ( RGB 参数 值 分 别 为 22、118、 
255 ) 、“ 粗 细 ” 为 15 像 素 ， 绘 制 一 个 直线 形状 ， 效 果 如 图 11-23 所 示 。 


4 - 
i 微 课 手 机 摄影 i 微 课 手机 摄影 
直播 讲师 直播 讲师 


图 11-22 输入 文字 图 11-23 ”绘制 直线 
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e@5STEP 19 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 细 黑 一 简 
体 ”、“ 字 体 大 小 ”为 9 点 、“ 行 距 ” 为 13 点 、“ 设 置 所 选 字 符 的 字 距 调整 ”为 -10、“ 颜 色 ” 为 蓝 色 
( RGB 参数 值 分 别 为 22、118、255 ) ， 并 激活 仿 粗 体 图 标 ， 在 图 像 编 辑 窗口 中 绘制 一 个 文本 框 并 输入 
文字 ， 效 果 如 图 11-24 所 示 。 

9 STEP 20 选取 工具 箱 中 的 多 边 形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 “填充 ” 
为 蓝 色 ( RGB 参数 值 分 别 为 22、118、255 ) 、“ 描 边 ”为 无 、“ 边 ”为 3， 按 住 Shift 键 的 同时 ， 单 击 鼠 
标 左 键 绘制 一 个 三 角形 形状 ， 效 果 如 图 11-25 所 示 。 

9 STEP 21 按 Ctrl+J 组 合 键 ， 复 制 “多 边 形 1” 图 层 ， 得 到 “多 边 形 1 拷贝 ”图 层 ， 如 图 11-26 所 示 。 


so= 路 企 至 
:1 > 
PA < Pa ~v 回 @TOD 间 
正常 Y 不 透明度: 100% ~ 
| > 一 位 构图 专家 锁定 :加 A/ 中 村 四 填充 :100% ~v 
计 
课 手机 摄影 单 点 极致 类 刀 思 维 
直播 讲师 原创 300 多 篇 构图 文章 
提炼 500 多 种 构图 技法 党 5 


一 位 构图 专家 


单 点 要 到 尖刀 思维 细 化 100 多 种 构图 方法 
原 记 300 多 篇 构 图 文 章 
失 煤 500 多 种 构 用 技法 
细 化 100 多 种 构图 方法 @ 后 形状 2 
a 太 OOD 司 他 
图 11-24 输入 文字 图 11-25 绘制 三 角形 图 11-26 得 到 “多 边 形 1 拷贝 ”图 层 
9 STEP 22 按 Ctrl+T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 的 位 置 ， 并 按 Enter 键 确认 变换 ， 如 图 11-27 


所 示 。 

9 STEP 23 按 Shift+Ctl+AlttrT 组 合 键 ， 重 复 变换 图 层 3 次 ， 效 果 如 图 11-28 所 示 。 

9 STEP 24 单 击 “ 文 件 ” | “打开 ”命令 ， 打 开 “ 二 维 码 与 标志 .psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 
像 拖 中 至 背景 图 像 编 辑 窗 口中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 11-29 所 示 。 


三 1 和光 【 计 Es 

| 全 和 1 

> 一 位 构图 专家 > 一 位 构图 专家 a. 1 
单 点 极致 尖刀 思维 b> 单 点 极致 尖刀 思维 生 【 汉 

原创 300 多 篇 构图 文章 * 原创 300 多 篇 构图 文章 A SN 

| 交换 上 胆 炼 500 多 种 构图 技法 | 提炼 500 多 种 构图 技法 1 牙 课 手机 所 影 

细 化 100 多 种 构图 方法 je 细 化 100 多 种 构图 方法 直播 讲师 

图 11-27 确认 变换 图 11-28 重复 变换 图 层 图 11-29 拖 虽 图像 


11.2.2 ” 微 课 课程 页 设计 


在 制作 微 课 课 程 页 时 ， 首 先 调整 背景 图 像 的 色彩 ， 增 强 氛 围 感染 力 ， 然 后 制作 一 个 主体 框架 效果 ， 
突出 要 表达 的 课程 信息 ， 如 讲师 、 标 题 和 具体 内 容 等 ， 最 后 添加 二 维 码 和 LOGO， 实 现 引流 效果 。 
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本 实例 的 最 终 效果 如 图 11-30 所 示 。 


二 位 了 本 心间 党 好 旭 


手册 提出 景深 虚 化 效果 
10 层 荐 界 从 人 门 到 钴 通 


图 11-30 ”实例 效果 


下 素材 文件 | 素材 \ 第 11 章 \ 课 程 页 背景 jpg、 课 程 主体 ,psd 
效果 文件 “| 效果 \ 第 11 章 \ 微 课 课程 页 设计 .psd、 微 课 课程 页 设计 .jpg 


9 STEP 01 按 Chl+N 组 合 键 ，@ 弹 出 “新 建文 档 ” 对 话 框 ，@ 设 置 “ 名 称 ” 为 “ 微 课 课程 页 设计 ”、“ 宽 
度 ” 为 1080 像 素 、“ 高 度 ” 为 1920 像 素 、“ 分 辨 率 ” 为 300 像 素 /英寸 、“ 颜 色 模 式 ” 为 “RGB 颜色 ”、 
“背景 内 容 ” 为 “白色 ”， 人 @ 单 击 “ 创 建 ”按钮 ， 如 图 11-31 所 示 ， 新 建 一 个 空白 图 像 。 

9 STEP 02 单 击 “文件 ”|“ 打 开 ” 命 令 ， 打开 “课程 页 背景 jpg” 素 材 图 像 ， 如 图 11-32 所 示 。 


Os 


图 11-31 设置 各 选项 图 11-32 素材 图 像 

9 STEP 03 单 击 “ 图 像 ”|“ 调 整 ”|“ 自 然 饱 和 度 ” 命 令 ，@ 弹 出 “自然 饱和 度 ”对 话 框 ， 全 设置 “ 自 
然 饱 和 度 ” 为 100、“ 饱 和 度 ” 为 13， 合 单 击 “确定 ” 按 钮 ， 如 图 11-33 所 示 。 

9 STEP 04 按 Ctl+M 组 合 键 ，@ 弹 出 “曲线 ”对 话 框 ， 全 在 曲线 上 单 击 鼠 标 左 键 新 建 一 个 控制 点 ， 全 在 
下 方 设置 “输入 ”为 156、“ 输 出 ”为 127，@ 单 击 “确定 ” 按 钮 ， 如 图 11-34 所 示 。 

© STEP 05 单 击 “ 图 像 ”|“ 调 整 ”|“ 亮 度 /对 比 度 ” 命 令 ，@ 弹 出 “亮度 /对 比 度 ” 对 话 框 ，@ 设 置 “ 对 
比 度 ”为 33， 和 @ 单 击 “ 确 定 ”按钮 ， 如 图 11-35 所 示 。 

9 STEP 06 运用 移动 工具 将 素材 图 像 拖 忠 至 背景 图 像 编辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 11-36 
所 示 。 
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Of 出 星 示 动量: 


预 设 (Ry: 自 定 二 克 定 。) 
© 元 (0-255)0) 
通 直 :RGB v 河 
cs 项 料 / 油 重 3%(G) 
E24 7 
A 


oF 画 E ry 
选 顺 (T) 


通道 得 加 [V) CE 
加 下 方 加 CH) 

© (8) 

回 交叉 续 (M) 


饱和 度 (5); 


图 11-33 “自然 饱和 度 ” 对 话 框 图 11-34 “曲线 ”对 话 框 


对 tt@@ 设 置 | 一 >5 一 
使 用 旧版 (LU) 
预览 (p) 
图 11-35 “亮度 /对 比 度 ” 对 话 框 图 11-36 拖 旨 图像 
9 STEP 07 单 击 “ 滤 镜 ”|“ 模 糊 ”|“ 方 框 模糊 ”命令 ， 弹 出 “ 方 框 模糊 ”对 话 框 ， 设 置 “ 半 径 ”为 100 
像素 ， 单 击 “ 确 定 ”按钮 ， 效 果 如 图 11-37 所 示 。 
9 STEP 08 选取 工具 箱 中 的 圆 角 和 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 白色 ( RGB 参数 值 均 为 
255 ) 、“ 描 边 ”为 无 、“ 半 径 ” 为 25 像 素 ， 在 图 像 编辑 窗口 中 绘制 一 个 圆 角 矩形， 如 图 11-38 所 示 。 
9 STEP 09 @@ 展 开 “ 图 层 ” 面板， 亿 栅 格 化 “ 圆 角 和 矩形 1” 图 层 ， 各 并 设置 “不 透明 度 ”为 80%， 如 


图 11-39 所 示 。 


图 11-37 图 像 效 果 图 11-38 ”绘制 圆 角 矩形 图 11-39 “图 层 ” 面 板 


正常 ~ 不通 明度 : 80% 
锁定 :图 A 中 酉 人 填充 : 10p% ~ 


. 0 轩 角 拭 形 1 固 设置 
© 图 层 1 
四 栅 格 化 自 


OB 日 人 


第 人 ff 章 ” 微 课 广 告 设计 


王安忆 应 用 “模糊 ” 滤 镜 ， 可 以 使 图 像 中 清晰 度 或 对 比 度 较 强烈 的 区 域 ， 产 生 模糊 

家 指点 的 效果 。 | 
的 椭圆 选 框 工 具 ， 在 图 像 编辑 窗口 中 绘制 一 个 正 圆 选 框 ， 如 图 11-40 所 示 。 

[ 具 属 性 栏 中 的 “新 选区 ”日 按钮 ，@ 将 选区 


9e STEP 10 选取 工具 箱 上 
@ STEP 11 按 Delete 键 ，@@ 删 除 选区 内 的 图 像 ， 单 击 椭圆 了 


移动 至 合适 位 置 ， 如 图 11-41 所 示 。 
e@STEP 12 按 Delete 键 ， 删 除 选 区 内 的 图 像 ， 并 取消 选区 ， 效 果 如 图 11-42 所 示 。 


图 11-40 ”绘制 正 圆 选 框 图 11-41 移动 选区 图 11-42 取消 选区 
9 STEP 13 选取 工具 箱 中 的 横 排 文字 工具 ，@ 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 细 黑 一 
简体 ”、“ 字 体 大 小 ”为 10 点 、“ 颜 色 ” 为 灰色 ( RGB 参数 值 均 为 93 ) ，@ 并 激活 仿 粗 体 图 标 ， 


如 图 11-43 所 示 。 
9 STEP 14 在 图 像 编辑 窗口 中 输入 文字 ， 并 移 至 合适 位 置 ， 效 果 如 图 11-44 所 示 。 
9 STEP 15 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 白色 、 


辑 窗 口中 的 适当 位 置 绘制 一 个 矩 形 形 状 ， 如 图 11-45 所 示 。 


“ 描 边 ” 为 无 ， 在 图 像 编 


龙 飞 老师 倾心 打造 深度 好 课 


美国 英语 ~aa| 清 昌 
图 11-43 设置 各 选项 图 11-44 输入 文字 图 11-45 ”绘制 矩形 
9 STEP 16 选取 多 边 形 套 索 工具 ， 在 适当 位 置 绘制 一 个 三 角形 选区 ， 如 图 11-46 所 示 。 
区 ， 如 


e@STEP 17 新 建 图 层 ， 设 置 前 景色 为 灰色 ( RGB 参数 值 均 为 176 ) ， 为 选区 填充 前 景色 并 取消 选 


图 11-47 所 示 。 
e@STEP 18 复制 “图 
图 11-48 所 示 。 


翻转 图 像 ， 并 移 至 合适 位 置 ， 效 果 如 


层 2” 图 层 ， 得 到 “图 层 2 找 贝 ”图 层 ， 水 了 


Photoshop 


新 媒体 广告 设计 
龙 飞 老师 倾心 打造 深度 好 课 
绘制 
图 11-46 绘制 三 角形 选区 图 11-47 填充 前 景色 图 11-48 ”移动 图 像 
9 STEP 19 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “ 汉 仪 萎 心 体 简 ”、 
“字体 大 小 ”为 18 点 、“ 行 距 ” 为 26 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -50、“ 颜 色 ” 为 蓝 色 ( RGB 


参数 值 分 别 为 46、156、211 ) ， 并 激活 仿 粗 体 图 标 ， 在 图 像 编辑 窗口 中 输入 文字 ， 如 图 11-49 所 示 。 

@ STEP 20 选取 工具 箱 中 的 横 排 文 字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 粗 倩 简体 ”、 
“字体 大 小 ”为 12 点 、“ 行 距 ” 为 13 点 、“ 颜 色 ” 为 灰色 ( RGB 参数 值 均 为 80 ) ， 并 激活 仿 粗 体 图 
标 ， 在 图 像 编 辑 窗口 中 输入 文字 ， 如 图 11-50 所 示 。 


龙 飞 老师 倾心 打造 深度 好 课 


手机 拍 出 景深 虐 化 效果 
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课程 内 容 
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手机 拍 出 景深 虚 化 效果 
10 层 境界 从 人 入门 到 精通 


图 11-49 输入 文字 图 11-50 输入 文字 
© STEP 21 按 Ctrl+O 组 合 键 ， 打 开 “ 课 程 主体 .psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 中 至 背景 图 
像 编辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 11-51 所 示 。 
9 STEP 22 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 细 黑 一 简 
体 ”、“ 字 体 大 小 ”为 13 点 、“ 行 距 ” 为 16 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -50、“ 颜 色 ” 为 白 
色 ( RGB 参 数值 均 为 255 ) ， 并 激活 仿 粗 体 图 标 ， 在 图 像 编辑 窗口 中 输入 文字 ， 如 图 11-52 所 示 。 


pp 
手册 拍 出 改 深 虐 化 效果 
Im 层 境 办 从 人 门 到 锋 台 


手机 拍 出 蝴 深 虚 化 效果 
加 层 境界 从 人 入 门 到 其 通 


入 内 容 
TY 


图 11-51 拖 名 图 像 图 11-52 输入 文字 
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11.2.3 ” 微 课 推广 页 设计 


在 制作 微 课 推 广 页 时 ， 首 先 调整 图 像 的 色彩 和 影 调 ， 增 强 画 面 的 色彩 浓度 和 层次 感 ， 然后 虚 化 背 
景 ， 突 出 主体 花 采 ， 打 造 浅 景深 效果 ; 最 后 添加 各 种 文字 信息 ， 展 现 推广 主题 。 
本 实例 的 最 终 效果 如 图 11-53 所 示 。 
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9 STEP 01 按 CtrI+N 组 合 键 ，@ 弹 出 “新 建文 档 ” 对 话 框 ，@ 设 置 “ 名 称 ” 为 “ 微 课 推 广 页 设计 ”、 
“宽度 ”为 1080 像 素 、“ 高 度 ” 为 1920 像 素 、“ 分 辨 率 ”为 300 像 素 / 英 寸 、“ 颜 色 模式 ”为 “RGB 颜 
色 ”、“ 背 景 内 容 ” 为 “白色 ”， 合 单 击 “ 创 建 ” 按 钮 ， 如 图 11-54 所 示 ， 新 建 一 个 空白 图 像 。 

9 STEP 02 单 击 “ 文 件 ”|“ 打 开 ” 命 令 ， 打 开 “ 推 广 页 背景 jpg” 素 材 图 像 ， 如 图 11-55 所 示 。 


(EB 
图 11-54 设置 各 选项 图 11-55 素材 图 像 
© STEP 03 单 击 “ 窗 口 ” | “调整 ”人 命令， 展开“ 调整 ”面板 ， 单 击 “ 色 彩 平衡 ”按钮 ， 新 建 “ 色 彩 平衡 


1” 调 整 图 层 ， 如 图 11-56 所 示 。 


告 设 计 


e@STEP 04 i I 有 -35、 16、10，, el Se 


过 道 路径 ”图 层 三 有 
WH 口 Ej 而 

Pp#a vo@TnNA® 

正常 “| 不通 明度 : |100% | ~ 


锦 E: 加 A 中 村 填充 : 100% ~ 


六 QQG. 饭 司仪 YASen 
图 11-56 新建 调整 图 层 图 11-57 设置 各 参数 图 11-58 图像 效 果 


9 STEP 06 在 “调整 ”面板 中 单 击 “ 自 然 饱和 度 ” 按 钮 ， 新 建 “ 自 然 饱和 度 1 ”调整 图 层 ， 在 展开 的 
“属性 ”面板 中 设置 “自然 饱和 度 ”为 62， 效 果 如 图 11-59 所 示 。 

9 STEP 07 按 Shift+Ctrl+Alt+E 组 合 键 ， 盖 印 可 见 图 层 ， 得 到 “图 层 1” 图 层 ， 如 图 11-60 所 示 。 

9 STEP 08 运用 移动 工具 将 素材 图 像 拖 中 至 背景 图 像 编辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 11-61 


所 示 。 
通道 路径 。 本 时 和 
Pa vv 四 @TODB e 
正常 ~ 不 透明度: 100% > 
包 定 ; 2 员 地 人 填充 : 100% ~ 
“四 
@ 一 8|| | 自然 鸳 和 度 1 
得 到 

© 5 色彩 平衡 1 
© 同 丛 旦 向 

DG 回合 

图 11-59 图 像 效果 图 11-60 得 到 “图 层 1” 图 层 图 11-61 图 像 效果 


9 STEP 09 单 击 “ 滤 镜 ”|“ 模 糊 画廊 ”|“ 光 图 模糊 ”命令 ， 进 入 编辑 界面 ， 调 整 光圈 的 大 小 与 位 置 ， 
如 图 11- en 并 在 右 侧 设置 “模糊 ”为 28 像 素 。 
确定 ” 全 应 用 “光圈 模糊 ” 滤 镜 ， 效 果 如 图 11- 63 所 示 。 


模 衫 ， 顾 名 思 义 就 是 用 类 仪 相机 的 镜头 来 对 焦 ， 焦 点 周转 的 图 像 会 相应 
ER , ry . 
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9 STEP 11 选取 工具 箱 中 的 横 排 文 字 工具 ， 人 在 “字符 ”面板 中 设置 “字体 系列 ”为 “ 汉 仪 鞭 心 体 
简 ”、“ 字 体 大 小 ”为 26 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -75、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 
为 255 ) ，@ 并 激活 仿 粗 体 图 标 ， 如 图 11-64 所 示 。 


加 设置 


字符 ”县 营 》% | 至 


汉 仪 装 心 体 简 
~ 夫 自动 


美国 英语 v aa 平滑 
图 11-62 调整 光圈 的 大 小 与 位 置 图 11-63 图像 效果 图 11-64 设置 各 选项 

9 STEP 12 在 图 像 编 辑 窗口 中 输入 文字 ， 并 移 至 合适 位 置 ， 效 果 如 图 11-65 所 示 。 

9 STEP 13 复制 刚刚 输入 的 文字 ， 并 将 其 移动 至 合适 位 置 ， 在 “字符 ”面板 中 “字体 大 小 ”为 15 点 、 
“设置 所 选 字符 的 字 距 调整 ”为 -<50， 运 用 横 排 文 字 工具 修改 文本 内 容 ， 效 果 如 图 11-66 所 示 。 

9 STEP 14 选取 工具 箱 中 的 横 排 文 字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 粗 倩 简体 ”、 
“字体 大 小 ”为 13 点 、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 为 255 ) ， 在 图 像 编辑 窗口 中 输入 文字 ， 效 果 
如 图 11-67 所 示 。 


10 层 境界 从 人 门 到 精通 


EJ | 每 各 拍 景 深 虐 化 效果 


10 层 境界 从 入 门 到 精通 


下 请 大: 龙 飞 
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图 11-65 ”输入 文字 图 11-66 修改 文本 内 容 - 图 11-67 输入 文字 

9 STEP 15 @Q 选 择 相 应 文字 图 层 ， 在 缩 览 图 中 单 击 鼠 标 右键 ,全 在 弹出 的 快捷 菜单 中 选择 “混合 选项 ” 
命令 ， 如 图 11-68 所 示 。 

9 STEP 16 @ 打 开 “ 图 层 样式 ”对 话 框 ，@@ 选 中 “外 发 光 ” 复 选 框 ， 合 设置 “不 透明 度 ” 为 35%、“ 扩 
展 ” 为 15%、“ 大 小 ”为 19 像 素 ， 如 图 11-69 所 示 。 

9 STEP 17 单 击 “确定 ”按钮 ， 即 可 为 文字 添加 “外 发 光 ” 图 层 样 式 ， 效 果 如 图 11-70 所 示 。 

9 STEP 18 复制 刚刚 输入 的 文字 ， 在 图 层 名 称 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “清除 图 层 样 
式 ” 命 令 ， 如 图 11-71 所 示 。 

e@STEP 19 在 “字符 ”面板 中 设置 “字体 大 小 ”为 28 点 ， 运 用 横 排 文字 工具 修改 文本 内 容 ， 并 移 至 合适 


位 置 ， 如 图 11-72 所 示 。 
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图 11-68 选择 区 合 过 图 11-69 输入 文字 
10 层 价 界 从 入 门 到 精通 | 10 层 境界 从 人 门 到 精通 
复制 
SE 
复制 图 层 … 
痢 险 图 屋 
快速 导 击 为 PNG 
二 从 : 龙 飞 号 :4 为. [ 相遇 大 : 龙 飞 
哇 奔 轩 间 : 9 月 69 20:00 来 折 图 局 的 画板 .。 舌 奔 轩 间 : 9 月 6B zo:oo 
转 挤 为 智能 对 象 
图 11-70 添加 “外 发 光 ” 图 层 样 式 ”图 11-71 选择 “清除 图 层 样式 ”命令 图 11-72 修改 文本 内 容 


9 STEP 20 复制 刚刚 输入 的 文字 ， 运 用 横 排 文字 工具 修改 文本 内 容 ， 并 移 至 合适 位 置 ， 如 图 11-73 所 示 。 

9 STEP 21 按 Ctrl+O 组 合 键 ， 打开“ 文字 .psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 折 至 背景 图 像 编 
辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 11-74 所 示 。 

9 STEP 22 选取 工具 箱 中 的 横 排 文 字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 粗 倩 简体 ”、 
“字体 大 小 ”为 17 点 、“ 行 距 ” 为 16、“ 颜 色 ” 为 绿色 ( RGB 参 数值 分 别 为 34、88、66 ) ， 并 激活 仿 
粗 体 图 标 ， 在 图 像 编辑 窗口 中 输入 文字 ， 如 图 11-75 所 示 。 


10 层 境界 从 入 门 到 请 通 


[BX: 1 
圭 记 时间 : 9 月 6 日 aomo | 


看 从 飞 老师 如 位 输入 | 


图 11-74 ” 拖 复 图 像 图 11-75 输入 文字 
9 STEP 23 单 击 “ 图 层 ”|“ 图 层 样 式 ”|“ 外 发 光 ”命令 ， 打开 “图 层 样式 ”对 话 框 ,设置 “不 透明 


局 


图 11-73 ”修改 文本 内 容 


度 ” 为 80%、“ 扩 展 ”为 13%、“ 大 小 ”为 21 像 素 ， 单 击 “确定 ”按钮 ， 即 可 为 文字 添加 “外 发 光 ” 
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图 层 样式 ， 效 果 如 图 11-76 所 示 。 

9 STEP 24 按 Ctrl+O 组 合 键 ， 打开“ 二 维 码 .jpg” 素 材 图 像 ， 选 取 工具 箱 中 的 裁剪 工具 ， 图 像 边缘 将 出 
现 虚线 框 ， 如 图 11-77 所 示 。 

9 STEP 25 在 图 像 编辑 窗口 中 单 击 鼠 标 左 键 ， 将 出 现 裁剪 控制 框 ， 适 当 调 整 裁剪 控制 框 的 大 小 与 位 置 ， 
如 图 11-78 所 示 。 


图 11-76 添加 “外 发 光 ” 图 层 样 式 - 图 11-77 ”出现 虚 线 框 图 11-78 调整 裁剪 控制 框 
9 STEP 26 按 Enter 键 确认 裁剪 ， 运 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编 辑 窗口 中 ， 适 当 调 整 图 像 的 
位 置 ， 效 果 如 图 11-79 所 示 。 
9 STEP 27 按 Ctrl+O 组 合 键 ， 打开“ 标志 .png” 素 材 图 像 ， 选 取 工 具 箱 中 的 和 矩形 选 框 工具 ， 选 中 部 分 图 
像 ， 如 图 11-80 所 示 。 
9 STEP 28 单 击 工具 箱底 部 的 前 景色 色 块 ， 弹 出 “ 拾 色 器 ( 前 景色 ) ”对 话 框 ， 设 置 RGB 参 数值 分 别 为 
211、139、185， 如 图 11-81 所 示 。 


扫 轴 拍 景深 虑 化 效果 


Wo 层 境界 从 入门 到 丧 池 
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图 11-79 拖 名 图 像 图 11-80 选中 部 分 图 像 图 11-81 设置 前 景色 

9 STEP 29 单 击 “ 确 定 ” 按 钮 ， 按 Alt+Delete 组 合 键 ， 为 选区 填充 前 景色 ， 按 Ctrl+D 组 合 键 ， 取 消 选区 ， 
效果 如 图 11-82 所 示 。 

@ STEP 30 选取 工具 箱 中 的 多 边 形 套 索 工具 ， 选 中 部 分 图 像 ， 如 图 11-83 所 示 。 

@ STEP 31 设置 前 景色 为 蓝 色 ( RGB 参数 值 分 别 为 22、118、255 ) ， 为 选区 填充 前 景色 并 取消 选区 ， 效 
果 如 图 11-84 所 示 。 


Photoshop 
新 媒体 广告 设计 


图 11-82 填充 前 景色 图 11-83 选中 部 分 图 像 图 11-84 填充 前 景色 

9 STEP 32 运用 移动 工具 将 素材 图 像 拖 忠 至 背景 图 像 编辑 窗口 中 ， 适 当 调整 图 像 的 位 置 ， 效 果 如 图 11-85 
所 示 。 

9 STEP 33 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 粗 倩 简体 ”、 
“字体 大 小 ”为 11 点 、“ 设 置 所 选 字 符 的 字 距 调整 ”为 100、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 为 
255 ) ， 如 图 11-86 所 示 。 

9 STEP 34 在 图 像 编辑 窗口 中 输入 文字 ， 并 移 至 合适 位 置 ， 效 果 如 图 11-87 所 示 。 
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图 11-85 拖 慢 图像 图 11-86 设置 各 选项 图 11-87 输入 文字 


机 拍 出 单反 景深 虚 化 效果 ! 


网 络 直播 可 以 简单 定义 为 : 在 现场 随 着 事件 的 发 生 、 发 展 进程 同步 制作 
和 发 布 信息 ， 具 有 双向 流通 过 程 的 信息 网 络 发 布 方式 。 现 在 有 更 多 的 人 关注 
网 络 直播 ， 特 别 是 网 络 视频 直播 更 受 关注 


把 握 热点 话题 占 先 机 主播 招募 


报 设计 


全 过 程 结 合 产品 主题 直播 宣传 长 页 设计 
“娱乐 + 直播 ”设计 方式 主播 推荐 海报 设计 
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用 区 驹 有 前 期 准备 : 直播 新 媒体 设计 要 点 


随 着 手机 、 平 板 等 移动 智能 终端 的 普及 ， 主 要 依托 于 移动 终端 的 直播 开始 进入 人 们 的 视野 。 凭 借 
着 网 民 的 庞大 用 户 基数 ， 直 播 势必 会 变 得 更 加 火热 。 本 节 主 要 讲解 直播 新 媒体 设计 要 点 ， 让 你 的 直播 
更 出 彩 ， 更 吸引 人 。 


12.1.1 把 握 热 点 话题 占 先 机 


在 互联 网 发 展 得 无 比 迅速 的 时 代 ， 热 点 就 代表 了 流量 。 因 此 ， 及 时 扣 住 时 代 热 点 来 做 设计 ， 才 能 
吸引 更 多 人 。 

打 个 简单 比方 ， 如 果 一 个 服装 设计 师 想 要 设计 出 一 款 引领 潮流 的 服装 ， 那 他 就 要 有 对 时 尚 热 点 的 
敏锐 眼光 和 洞察 力 。 直 播 新 媒体 设计 也 是 如 此 ， 一 定 要 时 刻 注意 市 场 趋势 的 变化 ， 特 别 是 社会 的 热点 
所 在 。 

设计 直播 新 媒体 界面 时 ， 如 果 能 够 将 产品 特色 与 时 下 热点 相 结合 ， 就 能 让 用 户 既 对 你 的 直播 痴迷 
无 比 ， 又 能 使 用 户 被 你 的 产品 所 吸引 ， 从 而 产生 购买 欲望 。 

例如 ，2016 年 里 约 奥运 会 就 是 一 个 大 热点 。 各 大 小 企业 纷纷 抓 住 这 个 热点 ， 将 自己 的 产品 与 奥 
运 会 联系 起 来 ， 利 用 “奥运 ”的 热点 推销 产品 。 比 如 当时 红 极 一 时 的 蚊帐 ， 中 国运 动员 在 卧室 撑 起 
了 蚊帐 ， 吸 引 了 不 少 外 国人 的 注意 。 因 为 大 多 数 欧美 地 区 没有 使 用 过 蚊帐 ， 所 以 ， 中 国 的 蚊帐 瞬间 就 
5 

显而易见 ，“ 蚊 帐 + 奥运 ”这 个 产品 营销 就 非常 符合 市 场 热点 的 要 求 。 于 是 各 大 商家 抓 住 了 这 个 
热点 ， 在 直播 设计 与 主题 中 都 加 入 了 这 个 热点 因素 ， 吸 引 了 不 少 用 户 关 注 。 

当然 ， 抓 住 了 热点 还 远 远 不 够 ， 最 重要 的 是 如 何 利用 热点 快速 策划 阶段 
出 击 。 这 是 一 个 程序 比较 周密 的 过 程 ， 笔 者 将 其 总 结 为 3 个 阶段 ， 如 Cg 
图 12-1 所 示 。 

总 之 ， 做 新 媒体 设计 既 要 抓 住 热 点 ， 又 要 抓 住 时 间 点 ， 同 时 抓 
住 用 户 的 心理 ， 这 样 才能 做 出 一 个 优秀 的 设计 作品 。 
同时 在 设计 时 ， 要 尽量 将 各 种 热点 关键 词 放 进 设计 中 ， 这 样 可 
以 更 好 地 吸引 用 户 的 眼球 。 比 如 最 近 流行 的 “一 言 不 合 就 ……”“ 走 
心 ”“ 种 草 ” 等 。 

在 设计 直播 时 ， 商 家 就 可 以 将 这 些 热点 词汇 巧妙 地 放 在 界面 中 |) 
来 吸引 用 户 流量 。 淘 宝 直 播 的 商家 就 会 经 常 采 用 热 词 来 作为 直播 标 
题 。 如 图 12-2 所 示 的 直播 主题 为 “种 草 双 十 二 12 款 任 选 ”; 如 图 12-3 
所 示 的 主题 是 “御寒 神器 ， 品 质 羽绒 服 ”。 图 12-1 跟 住 热点 快速 出 走 的 过 程 


情感 3 


直播 广告 设计 


< 。 润 宝 直播 Q 


固 12 月 上 新 联播 


图 12-2 “种 草 双 十 二 12 款 任 选 ”直播 主题 图 12-3 “御寒 神器 ， 品 质 羽绒 服 ”直播 主题 
此 可 见 ， 设 计 新 媒体 界面 时 借鉴 热点 词汇 确实 是 一 个 相当 实用 的 技巧 ， 能 够 成 功 地 引起 人 们 的 


共鸣 ， 同 时 也 获得 了 人 气 和 收益 。 


12.1.2 ”全 过 程 结 合 产品 主题 


如 果 商 家 想 要 让 用 户 从 头 到 尾 、 一 会 儿 不 落地 将 直播 看 完 ， 那 么 就 一 定 要 围绕 产品 特点 来 做 直播 


设计 。 NO 这 样 用 户 才 会 产生 想 要 购买 的 欲望。 
弹 绕 产品 特点 的 核心 就 是 “让 产品 做 主角 ”。 有 的 商家 在 做 直播 设计 时 ， 将 产品 放 在 一 边 ， 根 本 
没有 注意 突出 产 et 而 一 味 地 介绍 一 些 无 关 紧 要 的 东西 ， 这 种 直播 方法 是 不 可 取 的 ， 对 
商家 的 营销 来 说 有 百 害 而 无 一 利 。 
商家 必须 要 清楚 地 认识 到 : 产品 是 关键 ， 产 品 才 是 主角 ， 直 播 新 媒体 设计 的 目的 就 是 让 产品 给 用 
户 留 下 深刻 印象 ， 从 而 激发 用 户 的 购买 欲 。 那 么 “让 产品 做 主角 ”具体 该 怎么 做 呢 ? 这 里 有 几 个 基本 
做 法 ， 笔 者 将 其 总 结 为 三 点 ， 如 图 12-4 所 示 。 
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图 12-4 让 产品 做 主角 ”的 具体 做 法 
当然 ， 这 些 都 需要 在 设计 之 前 构思 好 ， 才 能 在 直播 时 最 好 地 将 产品 展示 出 来 。 例 如 ， 淘 宝 直播 中 


个 卖 珠宝 的 商家 ， 在 直播 中 展示 了 产品 的 相关 信息 ， 如 图 12-5 所 示 。 而 他 的 直播 内 容 也 全 都 是 转 
品 进 行 ， 他 尽 可 能 地 展示 出 珠宝 的 特色 、 质 地 、 适 合 的 人 群 等 ， 而 且 还 可 以 边 看 直播 边 单 击 链接 
该 直播 的 购买 链接 图 片 全 部 采用 纯 白 色 的 背景 ， 可 以 让 人 更 好 地 将 目光 集中 在 珠宝 上 ， 了 解 珠 


宝 的 特色 ， 同 时 也 能 最 大 限度 地 避免 消费 者 被 背景 所 干扰 ， 如 图 12-6 所 示 。 
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图 “=” 到 天 处 a 货 半 闪 书 皮 925 银 
姑 玉 石 平安 扣 玉 队 海区 银 扣 挂 件 


加 入 风物 和 


日 A 
3 货 吊 崔 竹 节 步 步 高 升 玉 崔 送 女 : 
¥168 


CT 


x 了 凤 时 S925 银 银 吊 恰 女 A 从 音 以 平 
3 上 志 ”之 扣 玉 从 平安 环 玉 亿 玉石 项 链 

$B” 
‘ 


加 入 风物 


图 12-6 珠宝 的 购买 链接 


人 “在 直播 中 ， 一 定 要 将 产品 的 优势 和 实力 尽量 地 在 短 时 间 内 展示 出 来 ， 让 用 户 看 | 
5 ， 到 产品 的 独特 魅力 所 在， 这 样 才 会 有 效 地 提高 购买 率 。 
还 需要 注意 的 是 ， 用 户 看 以 销售 为 目的 的 直播 是 因为 对 其 产品 感 兴趣 。 因 此 ， 设 计 直 播 界面 时 


应 该 以 产品 为 主 ， 大 力 宣 传 与 展示 产品 的 优势 、 特 点 。 只 有 这 样 ， 用 户 者 E 更 多 地 了 解 产 品 ， 从 而 购 
买 产品 。 


12.1.3 “娱乐 + 直播 ”设计 方式 


直播 现在 已 经 成 为 一 种 前 卫 的 社交 模式 ， 同 时 它 也 是 一 种 与 众 不 同 的 娱乐 方式 。 对 个 人 来 讲 ， 直 
播 是 可 以 把 自己 推广 出 去 ， 成 为 明星 、 红 人 的 一 个 绝 佳 平台 ， 而 对 商家 而 言 ， 它 是 一 种 推销 产品 、 赚 
取 利 润 的 全 新 营销 方式 。 随 着 人 们 消费 方式 的 转变 ， 越 来 越 多 的 人 倾向 于 娱乐 消费 。 

面 对 这 样 一 个 现状 ， 商 家 也 需要 改变 相应 的 策略 ， 恰 当地 利用 直播 这 种 具有 高 效益 的 娱乐 营销 方 
式 ， 并 设计 出 一 套 适 合 自身 产品 的 广告 宣传 界面 。 

例如 ，2016 年 8 月 15 日 ， 小 米 在 四 大 平台 进行 了 关于 “小 米 5 黑 科技 ”的 直播 。 这 不 是 一 场 普 通 的 
直播 ， 直 播 的 过 程 处 处 充满 了 惊喜 ， 很 好 地 结合 了 “娱乐 + 直播 ”设计 方式 。 

首先 是 雷军 放出 了 一 段 预告 片 ， 宣 传 15 日 晚上 8 点 将 会 有 一 场 关 于 展示 小 米 黑 科技 的 直播 ， 试 验 
内 容 将 会 涉及 小 米 5 的 戏 龙 820 处 理 器 、 防 抖 相机 、 屏 幕 、3D 陶 次 机 身 、 多 功能 NFC、 系 统 分 身 、 专 业 
计算 工具 、 扫 码 扫 题 等 8 个 方面 的 展示 ， 让 用 户 对 直播 充满 了 好 奇 与 期 待 。 如 图 12-7 所 示 为 雷军 放出 的 
预告 片 封 面 。 
直播 开始 时 ， 雷 军 和 几 个 技术 人 员 拿 着 电钻 、 钢 锯 等 工具 对 手机 进行 敲打 、 破 坏 ， 显 示 了 小 
米 5 的 黑 科 技 魅力 所 在 ;还 演示 了 手机 运行 双 微 信 、 双 QQ、 双 游戏 、 两 个 用 户 身 份 共 存 等 多 种 4 


Ea 
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国 } 
黑 科 技 实验 
Ot 
图 12-7 预告 片 封面 
直播 期 间 ， 和 雷军 还 每 隔 5 分 钟 就 送出 一 份 大 奖 ， 包 括 小 米 5、 小 米 手 环 2、VR 等 。 让 全 上 的 展示 图 
以 细节 图 为 主 ， dn “ 品 的 细节 特色 ， 并 且 颜 色 均 使 用 大 面积 的 低 明度 色彩 ， 浓 重 、 浑 厚 自 
彩带 给 和 人 深沉、 神秘 的 感觉 ， 也 符合 了 小 米 宣 


的 
I 黑 科技 的 神秘 感 ， 说 明 性 文字 则 采 由 及 于 字 ， 最 
限度 地 避免 产品 图 影响 用 户 对 产品 信息 的 文字 解读 。 如 图 12-8 所 示 为 送出 大 奖 的 产品 展示 。 


做 黑 科 技 实验 赢 小 米 5、 小 米 手 环 和 VR 


色 
大 


小 沫 5 名 快 - 黑 科 技 深度 种 读 揪 影 老 法 策 般 污 小 米 5 芒 持 相机 


Eg ea 


图 12-8 产 5 


这 些 颇 具 特 色 的 广告 宣传 ， 
直到 直播 结束 了 
“娱乐 + 直播 ” 


让 用 户 感 觉 企 业 的 直播 也 可 以 很 有 新 意 ， 
， 用 户 们 还 回味 无 穷 ， 同 时 也 对 小 米 展 
设计 模式 还 是 很 容易 获得 成 功 的 。 


享受 。 


尖 像 表演 一 样 给 人 带 来 精神 
县 示 的 各 种 产品 产 入 | 的 印象 。 可 见 


E 了 深交 


I 多 案例 实战 : 直播 新 媒体 广告 设计 


下 面 笔者 选取 几 个 比较 实 上 


的 案例 作为 示范 ， 


详细 讲解 如 何 设计 直播 广告 。 主 要 包括 主播 招募 海 
报 、 直 播 宣传 长 页 、 主 播 推 荐 海报 等 。 读 者 学 后 可 以 融会 贯通 、 举 一 反 三 
趣 的 效果 。 


制作 出 更 多 更 0D 精彩、 有 
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12.2.1 主播 招募 海报 设计 


在 制作 主播 招 慕 海报 时， 采用 黑白 装饰 与 明亮 的 杰 色 和 矩形 形成 鲜明 对 比 ， 使 观看 者 更 好 地 注意 到 
画面 中 央 的 人 物 ， 再 添加 适当 的 招募 信息 ， 即 可 完成 设计 。 
本 实例 最 终 效果 如 图 12-9 所 示 。 


图 12-9 ”实例 效果 
素材 \ 第 12 章 \ 招 募 海报 背景 jpg、 树 叶 1.png、 树 叶 2.png、 发 光 圆 点 .psd、 人 
En 物 1.psd、 文 字 1.psd、 文 字 2.psd 
效果 文件 “| 效果 \ 第 12 章 \ 主 播 招募 海报 设计 .psd、 主 播 招募 海报 设计 jpg 
ET | 视频 文件 | 12.2.1 主播 招募 海报 设计 .mp4 


9 STEP 01 单 击 “ 文 件 ” | "打开 ”命令 ， 打 开 “ 招 募 海报 背景 jpg” 素 材 图 像 ， 如 图 12-10 所 示 。 

9 STEP 02 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、“ 填 充 ” 为 
粉色 ( RGB 参数 值 分 别 为 242、154、118 ) 、“ 描 边 ”为 无 ， 在 图 像 编辑 窗口 中 的 适当 位 置 绘制 一 个 
矩形 形状 ， 如 图 12-11 所 示 。 

9 STEP 03 打开 “树叶 1.png” 素 材 ， 将 其 拖 电 至 背景 图 像 编 辑 窗 口中 的 合适 位 置 ， 如 图 12-12 所 示 。 


图 12-10 素材 图 像 图 12-11 绘制 矩形 图 12-12 拖 役 图 像 
9 STEP 04 单 击 “ 图 像 ”|“ 调 整 ”|“ 黑 白 ” 命 令 ， 弹 出 “黑白 ”对 话 框 ， 保 持 默 认 设置 ， 单 击 “ 确 
定 ”按钮 ， 效 果 如 图 12-13 所 示 。 
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| 在 打开 “黑白 ”对 话 框 时 ， 如 果 要 对 图 像 中 的 某 种 颜色 进行 细致 的 调整 ， 可 
~- E> 以 将 光标 定位 在 该 颜色 区 域 的 上 方 ， 按 住 并 拖 动 鼠标 可 以 使 该 颜色 变 亮 或 变 暗 ， 同 


: 时 ， “黑白” 对 话 框 中 相应 的 颜色 滑 块 也 会 自动 移动 位 置 。 


@ STEP 05 按 Ctrl+O 组 合 键 ， 打开“ 树叶 2.png” 素 材 图 像 ， 人 
辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， i 


图 12-13 ”图 像 效果 图 12-14 卸 复 图 像 图 12-15 拖 破 图 像 

9 STEP 07 单 击 “ 文 件 ”|“ 打 开 ” 命 令 , 打开 “人 物 1.psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 忠 至 
背景 图 像 编辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 12-16 所 示 。 

9 STEP 08 选取 工具 箱 中 的 直线 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 蓝 色 ( RGB 参数 值 分 别 为 14、 
49、155 ) 、“ 粗 细 ” 为 4 像素 ， 绘 制 一 个 直线 形状 ， 如 图 12-17 所 示 。 

© STEP 09 选取 工具 箱 中 的 直 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 
小 ”为 14 点 、“ 颜 色 ” 为 蓝 色 ( RGB 参数 值 分 别 为 14、49、155 ) ， 在 图 像 编 辑 窗口 中 输入 文字 ， 效 
果 如 图 12-18 所 示 。 


二 
es 
bo 


, 
Fe 
四 


w 


图 12-16 拖 名 图 像 图 12-17 绘制 直线 | 图 12-18 输入 文字 
9 STEP 10 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 蓝 色 ( RGB 参数 值 分 别 为 14、 
49、155 ) 、“ 描 边 ”为 无 ， 在 图 像 编辑 窗口 中 的 适当 位 置 绘 制 一 个 矩形 形状 ， 效 果 如 图 12-19 所 示 。 
9 STEP 11 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 Arial、“ 字 体 大 小 ” 
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为 6 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 900、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 为 255 ) ， 并 激活 仿 粗 


体 图 标 ， 在 图 像 编 辑 窗口 中 输入 文字 ， 如 图 12-20 所 示 。 
9 STEP 12 按 Ctrl+T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 旋 转 文字 ， 并 调整 位 置 ， 按 Enter 键 确认 变换 ， 效 果 
如 图 12-21 所 示 。 


和 | 
2 > 
As oe 
输 he 
输入 ~ vi» 
= 
9 Sa 


图 12-19 绘制 矩形 - 图 12-20 输入 文字 - 图 12-21 确认 变换 
9 STEP 13 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 Curlz MT、“ 字 体 大 
小 ”为 30 点 、“ 颜 色 ” 为 红色 ( RGB 参 数值 分 别 为 255、36、37 ) ， 并 激活 仿 粗 体 图 标 ， 在 图 像 编辑 
窗口 中 另 一 位 置 输入 文字 ， 如 图 12-22 所 示 。 
9 STEP 14 单 击 “编辑 ”| “变换 ”|“ 斜 切 ”命令 ， 调 出 变换 控制 框 ， 将 光标 移 至 变换 控制 框 边缘 ， 当 光标 
呈 上 形状 时 ， 向 上 拖 电 调整 文字 形状 ， 如 图 12-23 所 示 ， 按 Enter 键 确认 变换 ， 并 适当 调整 文字 位 置 。 


~ ~ 


皇家 重 避 】 。。 入 控制 杠 的 中 央 有 一 个 中 心 点， 在 默认 情况 下 ， 中 心 点 位 于 对 象 的 中 心 ， 它 
| 二 家 指点 ， 用 于 定义 对 象 的 变换 中 心 ， 拖 动 它 可 以 移动 它 的 位 置 。 中 心 点 的 位 置 不 同 ， 变 换 旋 
， 转 时 的 效果 也 会 不 同 。 
变换 控制 框 的 四 周 有 8 个 控制 柄 ， 将 鼠标 拖 点 至 控制 柄 上 ， 当 鼠标 呈 双 向 箭头 + 形状 时 ， 音 
， 击 鼠 标 左 键 的 同时 并 拖 虹 ， 即 可 放大 或 缩小 裁剪 区 域 ， 将 鼠标 移 至 控制 框 外 ， 当 鼠标 呈 刀 形状 
， 时， 可 对 其 裁剪 区 域 进 行 旋转 。 


9 STEP 15 选取 工具 箱 中 的 横 排 文 字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 细 珊 瑚 简体 ”、 
“字体 大 小 ”为 71.5 点 、 “颜色 ”为 蓝 色 ( RGB 参 数值 分 别 为 0、104、183 ) ， 如 图 12-24 所 示 。 


234 


第 12 章 ”直播 广告 设计 


e@STEP 16 在 图 像 编辑 窗口 中 输入 文字 ， 运 用 移动 工具 将 其 移 至 合适 位 置 ， 效 果 如 图 12-25 所 示 。 

e STEP 17 单 击 “ 图 层 ”|“ 图 层 样式 ”|“ 描 边 ” 命 令 ， 弹 出 “图 层 样式 ”对 话 框 ， 设 置 “大 小 ” 
“颜色 ”为 深蓝 色 ( RGB 参数 值 分 别 为 6、28、85 ) ， 单 击 “ 确 定 ”按钮 ， 应 用 图 层 样 式 ， 。 
图 12-26 所 示 。 


字符 ”让 落 | 三 
方正 细 山 瑚 漳 体 ~ 聚 ! | | 过 本 
代 7145 点 ”| 这 折 动 让 杭 … 
VAo ~ 四 ey 
1T loo% 工 100% FA 
全 点 me: 国 国 
TTTTTIT TIE 
fi 8 AGE 1 
美国 英语 vi 强 | 锐利 ~ ~ N SS 
图 12-24 设置 各 选项 | 图 12-25 输入 文字 图 12- 26 应 用 图 层 样式 


9 STEP 18 按 Ctrl+O 组 合 键 ， 打开“ 文字 1.psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 折 至 背景 图 像 编 
辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 12-27 所 示 。 

9 STEP 19 切换 至 “路 径 ” 面板， 选中“ 路径 1” 路 径 ， 按 Ctrl+Enter 组 合 键 将 路 径 转 换 为 选区 ， 如 图 
12-28 所 示 。 

9 STEP 20 切换 至 “图 层 ” 面 板 ， 新 建 一 个 图 层 ， 设 置 前 景色 为 蓝 色 ( RGB 参数 值 分 别 为 83、111、 
181 ) ， 为 选区 填充 前 景色 ， 并 取消 选区 ， 如 图 12-29 所 示 。 


图 12- 27 拖 昌 图 像 图 12-28 将 路 径 转换 为 选区 图 12-29 填充 前 景色 并 取消 选区 
9 STEP 21 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 无 、“ 描 边 ” 为 黄色 ( RGB 参 
数值 分 别 为 255、255、16 ) 、“ 描 边 宽度 ”为 8 像素 ， 在 图 像 编辑 窗口 中 的 适当 位 置 绘 制 一 个 矩形 形 
状 ， 如 图 12-30 所 示 。 
@ STEP 22 在 “图 层 ” 面板 中 ， 将 “矩形 3 ”形状 图 层 栅 格 化 ， 运 用 矩形 选 框 工 具 在 图 像 中 绘制 一 个 矩 
形 选 框 ， 如 图 12-31 所 示 。 
© STEP 23 按 Delete 键 ， 删 除 选 区 内 的 图 像 ， 按 Ctrl+D 组 合 键 ， 取 消 选 区 ， 效 果 如 图 12-32 所 示 。 
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图 12-30 ”绘制 矩形 图 12-31 绘制 矩形 选 框 图 12-32 ”删除 图 像 

9 STEP 24 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 细 黑 一 简 
体 ”、“ 字 体 大 小 ”为 16 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -50、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 
为 255 ) ， 并 激活 仿 粗 体 图 标 ， 在 图 像 编辑 窗口 中 输入 文字 ， 如 图 12-33 所 示 。 

9 STEP 25 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 白色 、“ 描 边 ”为 无 ， 在 图 像 编 
辑 窗口 中 的 适当 位 置 绘制 一 个 矩形 形状 ， 如 图 12-34 所 示 。 

9 STEP 26 选取 工具 箱 中 的 横 排 文 字 工具 ，@@ 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 细 黑 一 简 
体 ”、“ 字 体 大 小 ”为 6 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 1000、“ 颜 色 ” 为 暗 蓝 色 ( RGB 参数 值 
分 别 为 32、33、64 ) ，@ 并 激活 仿 粗 体 图 标 ， 如 图 12-35 所 示 。 


方正 细 黑 一 简体 ~ 
并 5 点 v 俊昌 动 


ioeAtARBTIY 
美国 英语 va 机 ~ 
图 12-33 输入 文字 图 12-34 ”绘制 矩形 图 12-35 设置 各 选项 
9 STEP 27 切换 至 “段落 ”面板 ， 单 击 “ 居 中 对 齐 文本 ”按钮 ， 在 图 像 编辑 窗口 中 输入 文字 ， 运 用 移动 
工具 将 其 移 至 合适 位 置 ， 效 果 如 图 12-36 所 示 。 
9 STEP 28 按 Ctrl+O 组 合 键 ， 打开“ 文字 2.psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 鬼 至 背景 图 像 编 
辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 12-37 所 示 。 


图 12-36 输入 文字 图 12-37 拖 旬 图像 


12.2.2 直播 宣传 长 页 设计 


在 制作 直播 宣传 长 页 时 ， 运 用 和 拢 形 框 将 不 同 内 容 分 成 几 个 区 域 ， 使 信息 更 加 清晰 明了 ， 采 用 绿 
为 辅助 色 ， 让 整个 画面 清爽 简洁 。 
本 实例 最 终 效 果 如 图 12-38 所 示 。 
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UI 拓 氏 大 片 过 术 ! 


效果 文件 | 效果 \ 第 12 章 \ 直 播 宣传 长 页 设计 .psd、 直 播 宣 传 长 页 设计 jpg 
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9 STEP 01 单 击 “ 文 件 ”| “新建 ”命令 ，@ 弹 出 “新 建文 档 ” 对 话 框 ，@ 设 置 “ 名 称 ” 为 “直播 宣传 长 页 
设计 ”、“ 宽 度 ”为 800 像 素 、“ 高 度 ” 为 5920 像 素 、“ 分 辨 率 ”为 300 像 素 /英寸 、“ 颜 色 模式 ”为 “RGB 
颜色 ”、“ 背 景 内 容 ” 为 “白色 ”， 合 单 击 “ 创 建 ”按钮 ， 如 图 12-39 所 示 ， 新 建 一 个 空白 图 像 。 

9 STEP 02 选取 工具 箱 中 的 矩 形 选 框 工具 ， 在 图 像 编辑 窗口 中 绘制 一 个 矩形 选区 ， 如 图 12-40 所 示 。 

9 STEP 03 设置 前 景色 为 青色 ( RGB 参 数值 分 别 为 135、189、171 ) ， 新 建 一 个 图 层 并 填充 前 景色 ， 按 
Ctrl+D 组 合 键 ， 取 消 选 区 ， 如 图 12-41 所 示 。 


直播 宣传 长 页 设计 EE 


上 
m mm 
国 D 


全 详 1 


图 12-40 绘制 矩形 选区 


一 一 NI 新建 文档 ”对 话 框 的 各 主要 选项 信义 如 Ff。 
[ss > 名 称 ; 可 输入 文件 的 名 称 ， 也 可 以 使 用 默认 的 文件 名 “未 标题 -1”。 创 建文 


件 后 ， 文 件 名 会 显示 在 文档 窗口 的 标题 栏 中 。 保 存 文件 时 ,文件 名 也 会 自动 


| 显示 在 存储 文件 的 对 话 框 内 。 
”> 宽度 /高 度 : 可 输入 文件 的 宽度 和 高 度 。 在 右 侧 的 选项 中 可 以 选择 一 种 单位 ， 包 括 “ 像 
。 。 素 " “ 鞭 赴 ” “厘米 ” “毫米”“ 点 ”和 “ 派 卡 ”。 

> 分辩 率 : 可 输入 文件 的 分 辩 率 。 在 右 侧 的 选项 中 可 以 选择 分 状 率 的 单位 ， 包 括 “ 像 素 /英寸 " 
和 “像素 /厘米 ”。 

”> 颜色 模式 可 以 选择 文件 的 颜色 模式 ， 包 括 位 图 、 友 度 、RGB 颜 色 、CMYK 颜 色 和 Lab 
颜色 。 

”> 背景 内 容 : 可 以 选择 文件 背景 的 内 容 ， 包 括 “ 白 色 ”“ 黑 色 ”“ 背 景色 ”和 “透明 ”。 一 般 
默认 “白色 ”为 背景 色 。 


9 STEP 04 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 小 标 宋 简 
体 ”、“ 字 体 大 小 ”为 7 点 、“ 颜 色 ” 为 绿色 ( RGB 参 数值 分 别 为 0、86、57 ) ， 并 激活 仿 粗 体 图 标 ， 
在 图 像 编辑 窗口 中 输入 文字 ， 如 图 12-42 所 示 。 
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图 12-41 取消 选区 图 12-42 输入 文字 
9@ STEP 05 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 小 标 宋 简 
体 ”、“ 字 体 大 小 ”为 12.5 点 、“ 行 距 ” 为 17 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -100、“ 颜 色 ” 为 
白色 ( RGB 参 数值 均 为 255 ) ， 并 激活 仿 粗 体 图 标 ， 在 图 像 编辑 窗口 中 输入 文字 ， 如 图 12-43 所 示 。 
9 STEP 06 按 Ctrl+O 组 合 键 ， 打开“ 人 物 2.jpg” 素 材 图 像 ， 运 用 椭圆 选 框 工 具 在 图 像 编辑 窗口 中 绘制 一 
个 正 圆 选 区 ， 如 图 12-44 所 示 。 


10 大 风光 构图 排行 榜 ， 
国庆 美景 大 片 这 样 拍 ! 


图 12-43 输入 文字 图 12-44 绘制 正 圆 选 区 


= i ee 人 ee i 
-去 家 指点 使 用 算 形 选 框 、 椭 图 选 框 工具 创建 选区 时 ， 在 释放 鼠标 按键 前 ， 接 信 空格 链 
， 拖 动 旧 标 ， wo 可 移动 选 区 。 | 


eSTEP 07 选取 工具 箱 中 的 移动 工具 ， 将 选区 内 的 图 像 拖 电 至 背景 图 像 编辑 窗口 中 ， 运 当 调整 图 像 的 位 
置 ， 效 果 如 图 12-45 所 示 。 

9 STEP 08 双击 “图 层 2” 图 层 ， 弹 出 “图 层 样式 ”对 话 框 ， 选 中 “ 描 边 ” 复 选 框 ， 设 置 “ 大 小 ”为 3 像 
素 、“ 颜 色 ” 为 绿色 ( RGB 参 数值 分 别 为 0 、81、53 ) ， 单 击 “ 确 定 ”按钮 ， 效 果 如 图 12-46 所 示 。 

9 STEP 09 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 小 标 宋 简 
体 ”、“ 字 体 大 小 ”为 6 点 、“ 颜 色 ” 为 绿色 ( RGB 参 数值 分 别 为 0、86、57 ) ， 并 激活 仿 粗 体 图 标 ， 
在 图 像 编辑 窗口 中 输入 文字 ， 如 图 12-47 所 示 。 

© STEP 10 复制 刚刚 输入 的 文字 图 层 ， 运 用 移动 工具 将 其 移动 至 合适 位 置 ， 并 运用 横 排 文字 工具 修改 文 
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本 内 容 ， 效 果 如 图 12-48 所 示 。 


10 大 风光 构 疙 HE 行 榜 ， 
国庆 美景 大 片 这 梢 汉 ! 


10 大 风光 构图 排行 榜 ， 


图 12-46 ”应 用 图 层 样式 


10 大 风光 构图 排行 榜 ， 
国庆 


图 12-47 输入 文字 图 12-48 修改 文本 内 容 
9 STEP 11 按 Ctrl+O 组 合 键 ， 打 开 “ 讲 师 简介 .psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 电 至 背景 图 
像 编辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 12-49 所 示 。 
9 STEP 12 选中 “图 层 ” 面 板 中 的 “1” 图 层 组 ， 复 制 该 图 层 组 ， 得 到 “1 拷贝 ”图 层 组 ， 重 命名 为 


“2”， 并 将 图 层 组 移 至 图 层 最 上 方 ， 如 图 12-50 所 示 。 


me as se 
Pa ~ 加 GTHA® 
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hmm shan A naar es | 国 加 
Me a a 
一 位 户外 旅行 家 。 
四国 天 过， 虽 ”本 十 位 构图 专家 。 [手机 
a 
a ta ee 。 | 疯 芭 顺序 
一 位 风光 摄影 家 。 
Bn ek E 
放 锌 拓 禾 业内 囊 ， 拍 过 天 山 雪 汇 ， 和 干 年 角 鳃 。 半 但 曾 恬 。 民 邱 去 流 ， 和 县 区 省 等 。 全 T 直播 时 间 : 明明 ee 
一 位 摄影 书 作 家 。 
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图 12-49 拖 负 图像 ”图 12-50 调整 图 层 组 顺序 


第 2 章 ”直播 广告 设计 


调整 图 层 版 序 时 ， 按 Shift+Ctrl+] 组 合 键 ， 可 以 快速 将 图 层 或 图 层 组 
置顶 。 


9 STEP 13 在 图 像 编 辑 窗口 中 将 “2” 图 层 组 的 图 像 移 动 至 合适 位 置 ， 如 图 12-51 所 示 。 
9 STEP 14 选取 工具 箱 中 的 横 排 文字 工具 ， 修 改 相应 文本 内 容 ， 如 图 12-52 所 示 。 


EY 


图 12-51 移动 图 像 图 12-52 修改 相应 文本 内 容 

9 STEP 15 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 小 标 宋 简 
体 ”、“ 字 体 大 小 ”为 7 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -30、“ 颜 色 ” 为 深 绿色 ( RGB 参数 值 分 
别 为 0、57、37 ) ， 如 图 12-53 所 示 。 

9 STEP 16 在 图 像 编辑 窗口 中 输入 文字 ， 并 移动 至 合适 位 置 ， 效 果 如 图 12-54 所 示 。 


TH Re RT 


字符 让 车 | 可 
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方正 小 标 宋 简体 


第 一 名 :分 线 构 时 一 一 大 片 的 湾 让 甘 。 押 分 为 7 种 
第 名: 刀 格 树叶 一- 大 片 的 焦点 美 ”网 分 为 中 种 
第 名: 黄金 树种 大 片 的 比例 其。 网 分 8 种 
侈 由 名 : 斜 线 树叶 一 大片 的 动态 筠 ” 细 分 为 s 种 
第 五 名 : 对 角 乒 村 一 大 片 的 创意 美 ”网 分 为 s 种 
第 六 名 : 井 线 树 对 一 一 -大片 的 线条 美 ”网 分 为 3 种 
第 七 名 : 进 视 树 半 一 一 大 片 的 立体 美 ”多 分 为 10 种 
第 八 名 : 根 果 构 轩 一 一 大 片 的 主体 美 “网 分 为 4 种 
第 九 名 : 对 比 顶 针 一 一 大 片 的 衬托 美 ” 细 分 为 1 种 
第 十 名 : 对 称 机 时 一 一 大 片 的 均 称 美静 分 为 s 种 


美国 英语 va 和 > 
图 12-53 设置 各 选项 图 12-54 输入 并 移动 文字 
@STEP 17 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 无 、“ 描 边 ” 为 绿色 ( RGB 参数 


值 分 别 为 0、86、57 ) 、“ 描 边 宽 度 ”为 4 像素 ， 在 图 像 编辑 窗口 中 的 适当 位 置 绘制 一 个 矩形 形状 ， 如 
图 12-55 所 示 。 

9 STEP 18 在 “图 层 ” 面板 中 ， 将 “和 珑 形 1” 图 层 调 整 至 “2” 图 层 组 的 下 方 ， 效 果 如 图 12-56 所 示 。 
STEP 19 按 Ctrl+O 组 合 键 ， 打 开 “ 讲 师 作品 .psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 卸 至 背景 图 
像 编辑 窗口 中 ， 适 当 调整 图 像 的 位 置 ， 效 果 如 图 12-57 所 示 。 

9 STEP 20 复制 “2” 图 层 组 与 “矩形 1” 图 层 ， 将 复制 后 的 图 像 移动 至 合适 位 置 ， 效 果 如 图 12-58 所 示 。 

eSTEP 21 选中 “和 珑 形 1 拷贝 ”图 层 ， 按 Ctrl+T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 的 大 小 ， 并 按 
Enter 键 确认 变换 ， 如 图 12-59 所 示 。 
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六 名 : 曲线 构 对 一 一 大片 的 线条 美 
:名 : 远视 构 对 一 一 大 片 的 立体 关 
和 杠 架 构图 一 一 大 片 的 主体 美 

和 对比 构 对- 一 一 大 片 的 衬托 美 

和 :对称 构 | 对 大 片 的 均 称 美 


有 细 分 X8 种 


细 分 为 7 种 
5 美 ” 细 分 为 H 种 


骨 分 为 5 种 
绷 分 为 5 种 
多 分 为 3 种 
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第 五 名 : 对 角 线 树叶 一 大 证 人 


第 六 名 : 昌 线 构 对 一 一 大片 的 

第 七 名 : 透视 村 对 一 一 上 大片 hee 
第 八 名 : 杠 梨 构 导 一 一 大 片 的 主体 美 
第 九 名 : 对 比 枝 针 一 一 大 片 的 衬托 关 
第 十 名 : 对 称 构 对 大 片 的 均 称 美 


细 分 为 10 种 
网 分 为 s 种 


图 12-55 ”绘制 矩形 


图 12-56 调整 图 层 顺序 


图 12-57 拖 避 图像 


图 12-58 ”移动 图 像 
9 STEP 22 选取 工具 箱 中 的 横 排 文字 工具 ， 修 改 相 应 文本 内 容 ， 如 图 12-60 所 示 。 


yy  “ 窜 差 ” 决 定 了 选中 颜色 的 范围 。 
四 法 容 差 值 较 低 时 ， 只 选择 与 单 击 点 像素 相似 度 高 的 少量 颜色 容 差 值 较 高 时 ， 对 


| 。 像素 相似 程度 的 要 求 就 越 低 ， 所 以 选择 的 颜色 范围 就 越 广 。 


但 是 需要 注意 的 是 ， 即 使 在 同一 区 域 的 同一 位 置 单 击 ， 设 置 的 容 差 值 不 同 ， 选 择 的 区 域 也 会 | 


不 一 样 。 


图 12-59 ”确认 变换 


9 STEP 23 按 Ctrl+O 组 合 键 ， 打开 jpe” 素材 图 像 ， 选 择 魔 棒 工具 ， 在 工具 属性 栏 中 设置 “ 容 


差 ”为 10， 在 背景 白色 区 域 单 击 鼠标 左 键 ， 


创建 选区 ， 如 图 12-61 所 示 。 


9 STEP 24 按 Ctrl+Shift+T 组 合 键 ， 反 选 选 


， 运 用 移动 


具 将 选 


中 ， 适 当 调整 图 像 的 大 小 和 位 置 ， 效 果 如 图 12-62 所 示 。 
eSTEP 25 按 Ctrl+O 组 合 键 ， 打 开 “ 书 籍 2.psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 中 至 背景 图 像 编 
辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 12-63 所 示 。 
9 STEP 26 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 小 标 宋 简 
体 ”、“ 字 体 大 小 ”为 12 点 、“ 颜 色 ” 为 绿色 ( RGB 参数 值 分 别 为 0、81、53 ) ， 并 激活 仿 粗 体 图 
标 ， 在 图 像 编 辑 窗口 中 输入 文字 ， 效 果 如 图 12-64 所 示 。 
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内 的 图 像 拖 折 至 背景 图 像 编 辑 窗口 


修改 文本 


图 12-60 修改 相应 文本 内 容 二 


和 未 扫 但 即 可 关注 ! 
图 12-63 拖 岗 图像 图 12-64 ”输入 文字 


12.2.3 ”主播 推荐 海报 设计 


在 制作 主播 推荐 海报 时 ， 先 打开 素材 图 像 并 进行 适当 的 处 理 ， 然 后 运用 笔 刷 合成 金色 的 主题 文 
字 ， 再 运用 图 层 样式 制作 出 主播 信息 边框 ， 即 可 完成 设计 。 
本 实例 的 最 终 效果 如 图 12-65 所 示 。 


图 12-65 ”实例 效果 
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1 | 素材 文件 | 素材 \ 第 12 章 \ 主 播 推荐 海报 背景 jpg、 人 金色 底 纹 jpg、 标 志 .png 
让 | 效果 文件 “| 效果 \ 第 12 章 \ 主 播 推荐 海报 设计 .psd、 主 播 推荐 海报 设计 jpg 


. | 视频 文件 | 12.2.3 主播 推荐 海报 设计 -mp4 


e@STEP 01 单 击 “文件 ”|“ 打 开 ” 命 令 ， 打开 “主播 推荐 海报 背景 jpg” 素 材 图 像 ， 如 图 12-66 所 示 。 
9 STEP 02 单 击 “ 图 像 ”|“ 调 整 ”|“ 亮 度 /对 比 度 ” 命 令 ， 弹 出 “亮度 /对 比 度 ”对 话 框 设置“ 亮度 ” 
为 35、“ 对 比 度 ” 为 30， 如 图 12-67 所 示 。 


设置 


图 12-66 素材 图 像 | 图 12-67 设置 各 选项 
9 STEP 03 单 击 “确定 ”按钮 ， 即 可 应 用 “亮度 /对 比 度 ”命令 ， 效 果 如 图 12-68 所 示 。 
9 STEP 04 单 击 “ 滤 镜 ”|“ 杂 色 ”|“ 减 少 杂 色 ” 命 令 ， 弹 出 “减少 杂 色 ”对 话 框 ， 设 置 “ 强 度 ” 为 7、 
“保留 细节 ”为 31%、 “减少 杂 色 ” 为 52%、“ 锐 化 细节 ”为 0， 如 图 12-69 所 示 。 


图 12-68 图像 效果 图 12-69 设置 各 参数 
9 STEP 05 单 击 “ 确 定 ” 按 钮 ， 即 可 应 用 “减少 杂 色 ” 滤 镜 减少 图 像 中 的 杂 色 ， 效 果 如 图 12-70 所 示 。 
© STEP 06 “图 像 ”|“ 调 整 ”|“ 自 然 饱 和 度 ” 命 令 ， 弹 出 “自然 饱和 度 ” 对 话 框 设置“ 自然 饮 
和 度 ” 为 31、“ 饱 和 度 ” 为 7， 单 击 “ 确 定 ” 按 钮 ， 效 果 如 图 12-71 所 示 。 


滤 镜 图 12-71 调整 图 像 的 自然 饱和 度 
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@ STEP 07 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “ 段 宁 毛笔 行书 ”、 
“字体 大 小 ”为 52 点 、“ 行 距 ” 为 42 点 、“ 设 置 所 选 字 符 的 字 距 调整 ”为 -200、“ 颜 色 ” 为 
( RGB 参 数值 均 为 255 ) ， 在 图 像 编 辑 窗口 中 输入 文字 ， 如 图 12-72 所 示 。 

9 STEP 08 双击 文字 图 层 ， 打 开 “ 图 层 样式 ”对 话 框 ， 选 中 “ 描 边 ” 复 选 框 ， 设 置 “ 大 小 ”为 8 像素 、 
“颜色 ”为 黑色 ( RGB 参数 值 均 为 0 ) ， 如 图 12-73 所 示 。 


图 12-72 输入 文字 图 12-73 设置 各 选项 
9 STEP 09 选中 “外 发 光 ” 复 选 框 ， 设 置 “ 不 透明 度 ” 为 50%、“ 扩 展 ” 为 0、“ 大 小 ”为 62 像 素 ， 单 击 
“确定 ”按钮 ， 即 可 为 文字 添加 相应 图 层 样 式 ， 如 图 12-74 所 示 。 
9 STEP 10 按 Ctl+O 组 合 键 ， 打 开 “ 金 色 底 纹 jpg” 素 材 图 像 ， 如 图 12-75 所 示 。 
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图 12-74 添加 图 层 样式 图 12-75 素材 图 像 
9 STEP 11 单 击 “ 图 像 |“ 调整 ”|“ 曲 线 ” 命 令 ， 弹 出 “曲线 ”对 话 框 ，@ 在 曲线 上 单 击 局 标 左 键 新 建 
一 个 控制 点 ，@ 在 下 方 设置 “输入 ”为 115、“ 输 出 ”为 170， 全 单 击 “ 确 定 ”按钮 ， 如 图 12-76 所 示 。 


9 STEP 12 单 击 “ 图 像 ”|“ 调 整 ”|“ 自 然 饱 和 度 ” 命 令 ， 弹 出 “自然 饱和 度 ” 对 话 框 ,设置 “自然 饮 
和 度 ” 为 100、“ 饱 和 度 ” 为 6， 单 击 “确定 ”按钮 ， 效 果 如 图 12-77 所 示 。 


调整 饱和 度 


图 12-76 设置 各 参数 图 12-77 ”图像 效果 
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9 STEP 13 运用 移动 工具 将 素材 图 像 拖 卸 至 背景 图 像 编辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 如 图 12-78 所 示 。 
e@STEP 14 选中 “图 层 1” 图 层 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “创建 剪 切 蒙 版 ”命令 ， 即 
可 创建 一 个 剪 切 蒙 版 ， 此 时 图 像 编 辑 窗口 中 的 效果 随 之 改变 ， 如 图 12-79 所 示 。 


图 12-78 拖 复 图 像 图 12-79 ”图像 效果 
9 STEP 15 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 白色 ( RGB 参 数值 均 为 255 ) 、 
“ 描 边 ”为 无 ， 在 图 像 编 辑 窗口 中 的 适当 位 置 绘制 一 个 矩形 形状 ， 如 图 12-80 所 示 。 
e@STEP 16 在 菜单 栏 中 单 击 “ 窗 口 ”|“ 样 式 ” 命 令 ， 如 图 12-81 所 示 。 


3 ws) Rn 300) We) 人 ww 
CE 


扩展 功能 2 


图 12-80 


图 12-81 单 击 “样式 ”命令 
9 STEP 17 @ 展 开 “ 样 式 ”面板 ， 全 在 其 中 选择 “雕刻 天 空 ( 文字 ) ”样式 ， 如 图 12-82 所 示 。 
9 STEP 18 执行 操作 后 ， 即 可 为 “矩形 1” 图 层 添加 立体 效果 ， 如 图 12-83 所 示 。 


全 是 画 回 ”mm 转 
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图 12-82 ”选择 相应 图 层 样式 图 12-83 添加 立体 效果 
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9 STEP 19 双击 “和 矩 形 1” 图 层 ，@ 弹 出 “图 层 样式 ”对 话 框 ， 全 单 击 左 下 角 的 .按钮 ， 合 在 弹出 的 快 
捷 菜 单 中 选择 “显示 所 有 效果 ”选项 ， 如 图 12-84 所 示 。 

9 STEP 20 选择 “渐变 到 加 ” 复 选 框 ， 单 击 “ 点 按 可 编辑 渐变 ”按钮 ， 弹 出 “渐变 编辑 器 ”对 话 框 ， 设 
置 浅 紫色 ( RGB 参 数值 分 别 为 164、160、251 ) 到 深蓝 色 ( RGB 参数 值 分 别 为 18、107、217 ) 的 渐变 
色 ， 如 图 12-85 所 示 。 
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图 12-84 选择 “显示 所 有 效果 ”选项 图 12-85 设置 渐变 色 
9 STEP 21 单 击 “确定 ”按钮 ， 返 回 “ 图 层 样式 ”对 话 框 ，@@ 选 中 “和 斜面 和 浮雕 ” 复 选 框 ， 外 设置 “大 
小 ”为 8 像素 、“ 阴 影 颜 色 ” 为 深 紫色 ( RGB 参 数值 分 别 为 91、42、164 ) ， 如 图 12-86 所 示 。 
9 STEP 22 选中 “ 描 边 ” 复 选 框 ， 设置 “大 小 ”为 4 像素 、“ 颜 色 ” 为 黑色 ( RGB 参数 值 均 为 0 ) ， 单 击 
“确定 ”按钮 ， 即 可 改变 图 层 样式 ， 效 果 如 图 12-87 所 示 。 


和 这 


图 12-86 设置 各 选项 图 12-87 改变 图 层 样 式 
9 STEP 23 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “ 胡 敬 礼 毛 笔 行书 
简 ”、“ 字 体 大 小 ”为 14 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -200、“ 颜 色 ” 为 白色 ( RGB 参数 值 均 


为 255 ) ， 在 图 像 编 辑 窗口 中 输入 文字 ， 如 图 12-88 所 示 。 
e@STEP 24 双击 文字 图 层 ， 打 开 “ 图 层 样 式 ” 对 话 框 ， 选 中 “投影 ” 复 选 框 ， 设 置 “不 透明 度 ” 为 
46%、“ 和 角度 ”为 30、“ 距 离 ” 为 4 像素 、“ 扩 展 ” 为 27%、“ 大 小 ”为 3 像素 ， 单 击 “ 确 定 ”按钮 ， 
即 可 为 文字 添加 “投影 ”图 层 样 式 ， 如 图 12-89 所 示 。 
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图 12-88 ”输入 文字 图 12-89 添加 “投影 ”图 层 样式 
9 STEP 25 按 Ctrl+O 组 合 键 ， 打 开 “ 标 志 .png” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 中 至 背景 图 像 编 


辑 窗口 中 ， 如 图 12-90 所 示 。 
9 STEP 26 按 Ctrl+T 组 合 键 ， 调 出 变换 控制 框 ， 适 当 调 整 图 像 的 大 小 和 位 置 ， 并 按 Enter 键 确认 变换 ， 效 
果 如 图 12-91 所 示 。 
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图 12-90 拖 复 图 像 图 12-91 确认 变换 
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微 商店 铺 的 应 用 领域 在 逐步 扩张 ， 应 用 形式 也 越 来 越 广泛 ， 并 深入 到 生 


活 的 各 个 细节 中 。 因 此 ， 本 章 将 重点 讲解 如 何 设计 自己 的 微 商 店铺 ， 使 店铺 
在 众多 微 商 店铺 中 表现 出 自己 独 有 的 特色 


直观 地 展示 淘宝 店铺 的 信息 
运用 技巧 提高 店铺 转化 率 
店铺 装修 中 的 注意 事项 


店 招 设计 
商品 简介 区 设计 
美 妆 微 店 界面 设计 
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是 测 上 前 期 准备 : 微 商 电 商 设计 要 点 


店铺 装修 是 店铺 运营 中 的 重要 一 环 ， 店 铺设 计 的 好 坏 ， 直 接 影响 顾客 对 于 店铺 的 最 初 印象 。 首 
页 、 详 情 页 面 等 设计 得 美观 、 丰 富 ， 顾 客 才 会 有 兴趣 继续 了 解 产品 ， 被 详情 的 描述 打动 了 ， 才 会 产生 
购买 欲望 并 下 单 。 本 节 主 要 向 读者 介绍 微 商 电 商 设计 要 点 。 


13.1.1 直观 地 展示 淘宝 店铺 的 信息 


网 络 店铺 的 装修 设计 可 以 起 到 一 个 品牌 识别 的 作用 。 对 实体 店 来 说 ， 好 的 形象 设计 能 使 店铺 保持 
长 期 的 发 展 ， 为 商店 塑造 更 加 完美 的 形象 ， 加 深 消费 者 对 企业 的 印象 。 
同样 ， 建 立 一 个 网 络 店铺 或 手机 微 店 也 需要 设 定 自己 店铺 的 名 称 、 独 具 特 色 的 LOGO 和 区 别 于 其 
他 店铺 的 色彩 和 装修 风格 ， 如 图 13-1 所 示 ， 微 店 首页 的 装修 图 片 中 ， 在 其 中 可 以 提取 很 多 重要 信息 ， 
如 店铺 的 名 称 、 上 店铺 的 LOGO、 上 店铺 配色 风格 、 上 店铺 销售 的 商品 等 。 
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图 13-1 网 店 首页 


1. 首页 欢迎 模块 
用 户 可 以 从 欢迎 模块 中 的 各 式 图 案 中 了 解 到 店铺 主要 营业 方向 ， 如 图 13-2 所 示 ， 也 有 些 首 页 会 标 
明 商 品 优惠 价格 。 


46ulll 32Ks BO O940 Dt BHO 全 82% (mm 


,= 蕊 : 


图 13-2 首页 欢迎 模块 


2. 店铺 介绍 
顾客 可 以 看 到 店铺 名 称 、 掌 柜 信息 、 收 藏 人 数 、 店 铺 所 在 城市 、 店 铺 标签 等 信息 ， 如 图 13-3 


所 示 。 
回 店铺 动态 @ 
| ,02#ms 
固 史 多 
代 14082 深圳 
图 13-3 ”店铺 信息 
3. 商品 列表 


从 店铺 首页 中 的 推荐 列表 中 ， 可 以 看 到 陈列 的 商品 ， 直 接 知道 店铺 销售 的 商品 ， 如 图 13-4 所 示 。 
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图 13-4 商品 列表 
店 和 微 店 中 的 LOGO 和 整体 的 店铺 风格 ， 一 方面 作为 一 个 网 络 品牌 容易 让 消费 者 熟知 ， 从 而 产 
生 心 理 上 的 认同 ; 另 一 方面 ， 也 作为 一 个 企业 的 CI 识别 系统 ， 让 店铺 区 别 于 其 他 竞争 对 手 。 
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.2 ”运用 技巧 提高 


店铺 转化 率 

店铺 各 个 模块 都 有 不 同 的 作用 ， 其 中 每 个 模块 所 传递 的 信息 内 容 ， 对 消费 者 有 很 强 的 引导 作 
本 小 节 将 对 淘宝 主要 模块 的 重要 内 容 做 讲解 。 

1. 准确 详细 地 介绍 商品 信息 

在 网 上 做 买卖 ， 最 主要 的 是 如 何 把 自己 的 商品 信息 准确 地 传达 给 顾客 ， 让 顾客 光顾 自己 的 店铺 。 
图 片 传递 只 是 商品 的 样式 和 颜色 的 信息 ， 对 于 性 能 、 材 料 、 售 后 服务 ， 买 家 一 概 不 知 ， 所 以 这 些 内 容 
需要 通过 文字 描述 来 告诉 买 家 。 
在 网 上 购物 ， 商 品 描述 是 影响 买 家 是 否 购买 的 一 个 重要 因素 。 很 多 卖家 也 会 花费 大 量 的 心思 在 


商品 描述 上 。 但 也 有 些 卖 家 经 过 一 段 时 间 就 会 发 现 花费 大 量 的 心思 ， 也 没什么 效果 ， 用 户 的 转化 率 还 


zy 
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是 不 高 ， 原 因 是 什么 呢 ? 主要 还 是 商品 描述 不 够 详细 。 用 户 在 介绍 商品 时 ， 各 方面 的 参数 都 要 详细 准 
确 ， 为 顾客 提供 商品 的 详细 信息 ， 以 方便 顾客 更 准确 地 定位 自己 的 需求 。 如 图 13-5 所 示 为 详细 准确 的 
商品 信息 介绍 。 
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图 13-5 商品 信息 介绍 

2. 购买 者 经 验 的 分 享 

淘宝 网 会 员 在 使 用 支付 宝 服务 成 功 完成 每 一 笔 交易 后 ， 双 方 均 有 权 对 对 方 交易 的 情况 做 一 个 评 
价 ， 这 个 评价 亦 称 之 为 信用 评价 。 成 交 与 否 的 重要 因素 是 有 个 良好 的 信用 评价 和 口碑 。 已 经 购买 过 的 
顾客 的 评论 对 正在 犹 殉 是 否 购买 商品 的 顾客 起 到 决定 性 作用 。 因 为 商家 提供 的 商品 信息 宣传 性 太 强 ， 
而 顾客 留 下 的 评论 却 比较 真实 ， 如 图 13-6 所 示 。 

3. 相关 证 书 或 证 明 的 展示 

如 果 是 玉石 类 商品 ， 就 可 以 展示 能 够 证 明 自 己 商品 品质 的 资料 ， 或 者 如 实 展 示 顾 客 所 关心 的 商品 
制作 过 程 ， 这 些 都 是 增强 顾客 对 商家 信任 度 的 方法 。 如 果 电 视 、 报 纸 等 新 闻 媒 体 曾 有 所 报道 ， 那 么 收 
集 这 些 资料 展示 给 顾客 看 ， 也 是 提高 顾客 购买 倾向 的 好 方法 ， 如 图 13-7 所 示 。 


一 克 人 内 的 站 行 虹 全 下 证 人 天 估 委 嘲 玉 右 检 测 证 书 一 定 有 ( A 货 ) 字样 A 的 ， 总 质量 是 宝贝 的 实 
性 价 比 很 高 喔 值得 购买 si 质量 ， 密 度 和 折射 度 是 天 天 荐 以 的 特有 国 
二 : 自 于 提 后 SE 罗 ， 证 + 并 名 与 说 并 丰 到 关 ， 志 作 力 和 入 和 大 机。 


Ne i cs roe 
i TNR Gl 


图 13-6 买 家 的 评论 图 13-7 展示 相关 证 书 或 证 明 
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13.1.3 ”店铺 装修 中 的 注意 事项 


在 网 上 可 以 看 到 很 多 卖家 的 店铺 装修 得 很 漂亮 ， 有 些 卖家 甚至 找 专业 人 士 装 修 店铺 。 但 在 面 对 各 
种 各 样 的 店铺 装修 行动 中 ， 稍 微 一 不 小 心 就 陷入 了 装修 的 误区 里 。 下 面 介绍 网 店 装修 过 程 中 常常 见 到 
的 6 大 误区 。 

1. 店铺 名 称 

淘宝 店铺 装修 店铺 名 称 简洁 ， 有 的 掌柜 相信 简单 就 是 一 种 美 ， 店 名 取 的 就 两 三 个 字 ， 殊 不 知 淘宝 
给 掌柜 30 个 字 的 编辑 限度 是 很 重要 的 。 比 如 ， 笔 者 的 店铺 是 做 手机 营业 厅 的 ， 刚 开始 起 的 名 字 是 “ 通 
讯 在 我 家 ”， 可 是 买 家 在 搜索 店铺 关键 词 的 时 候 ， 搜 索 手 机 、 手 机 卡 都 是 找 不 到 的 。 店 铺 名 称 要 利用 
好 30 个 字 。 相 信 很 多 人 还 会 利用 搜索 店铺 这 个 方法 来 对 宝贝 进行 搜索 。 因 此 ， 大 家 一 定 要 充分 利用 好 
这 30 个 字 。 

2. 图 片 展示 

有 些 店铺 的 首页 装修 中 ， 店 招 、 公 告 以 及 栏目 分 类 等 ， 全 部 都 是 使 用 图 片 ， 而 且 这 些 图 片 都 很 
大 。 虽 然 图 片 会 代表 店铺 的 整体 ， 但 是 却 会 使 得 买 家 浏览 的 速度 很 慢 ， 导 致 买 家 看 店铺 的 栏目 分 辩 
多 时 都 找 不 到 ， 或 者 是 重要 的 公告 也 没 看 到 。 这 样 就 会 让 买 家 失去 等 待 的 耐心 ， 从 而 造成 顾客 的 
流失 。 

3. 背景 音乐 
背景 音乐 基本 上 都 是 MP3 格 式 的 ， 一 般 都 在 几 M 左 右 。 有 些 加 载 起 来 速度 还 是 很 慢 的 ， 有 的 背景 

乐 是 在 浏览 宝贝 的 时 候 重复 播放 的 ， 这 一 点 相信 很 多 顾客 都 会 感到 厌烦 。 为 了 贴近 大 众 和 提高 网 页 
打开 速度 ， 建 议 不 要 添加 背景 音乐 ， 如 果 一 定 要 添加 ， 建 议 在 醒目 的 地 方 提醒 买 家 按 Esc 键 就 能 取消 
播放 。 

4. 店铺 风格 

有 些 卖 家 把 店铺 的 色彩 搭配 得 鲜艳 亮丽 ， 将 界面 做 成 五 彩 缤纷 。 色 彩 搭配 及 产品 突出 性 方面 体现 
在 淘宝 给 掌柜 提供 了 几 种 不 同 店铺 的 颜色 风格 。 无 论 商 家 选择 的 是 哪 一 种 产品 风格 ， 图 片 的 基本 色调 
与 公告 的 字体 颜色 最 好 与 之 对 应 ， 这 样 装修 出 来 的 店铺 整体 效果 和 谐 统 一 。 另 外 ， 签 名 档 是 一 个 很 好 
的 广告 ， 应 重点 突出 自己 的 产品 特点 ， 统 一 自己 的 店铺 风格 ， 并 且 要 合理 地 利用 好 签名 档 。 

5. 页 面 布局 

店铺 装修 的 页 面 布 局 设计 切忌 繁杂 ， 不 要 把 店铺 设计 成 门户 类 网 站 。 虽 然 把 店铺 做 成 大 网 站 看 
上 去 显得 比较 有 气势 ， 表 面 上 看 着 店铺 很 有 实力 ， 但 却 影响 了 买 家 的 使 用 ， 不 合理 或 者 复杂 的 布局 设 
计 会 让 人 眼花 练 乱 。 所 以 ， 不 是 所 有 可 装修 的 地 方 都 要 装修 或 者 必须 装修 ， 局 部 区 域 不 装修 反而 效果 
更 好 。 总 而 言 之 ， 想 要 让 买 家 进入 店铺 首页 或 者 商品 详情 页 面 以 后 ， 就 能 顺利 找到 自己 想 要 的 商品 信 
息 ， 并 且 可 以 快捷 地 看 清 商 品 的 详情 。 

6. 商品 图 片 水 印 尺寸 

商家 为 了 避免 图 片 侵权 的 情况 出 现 ， 通 常 都 会 在 商品 图 片上 添加 自己 店铺 的 水 印 。 但 是 如 果 不 能 
准确 地 把 握 好 水 印 的 尺寸 大 小 ， 就 会 削弱 商品 的 表现 ， 形 成 喧 宾 夺 主 的 情况 。 如 果 图 片 水 印 是 长 条 水 
印 或 者 其 他 外 形 ， 可 以 在 Photoshop 中 修改 图 片 水 印 尺寸 的 大 小 。 
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| 开 双 案例 实战 : 微 商 电 商 广告 设计 


在 网 络 店铺 中 ， 网 商 对 店铺 中 的 默认 模块 位 置 进行 了 一 个 初步 规划 ， 店 家 只 需要 对 每 一 个 模 
行 精致 的 设计 和 美化 ， 让 单一 的 页 面 呈 现 出 丰富 全 面 的 视觉 效果 ， 就 可 以 让 店铺 呈现 出 自己 的 特 
本 节 主 要 选取 店 招 、 商 品 简介 区 和 美 妆 微 店 界面 3 个 案例 来 分 析 。 


EE 


13.2.1 店 招 设计 


滤 镜 制作 出 扁平 化 风格 的 背景 图 像 ， 加 上 适当 的 文字 ， 使 整个 画面 显得 


在 制作 店 招 设计 时 ， 运 
简洁 清爽。 
本 实例 的 最 终 效 果 如 图 13-8 所 示 。 


il on O16 ETEXTED 


已 店 二 0 积分 昼 订单 


| 可 选 好 加 非 
至 配 至 潭 ， 辐 轩 尖 型 
| 束 渤 好 咖啡 
-2 


效果 文件 “| 效果 \ 第 13 章 \ 店 招 设计 psd、 店 招 设计 jpg 
视频 文件 | 13.2.1 店 招 设计 .mp4 


9 STEP 01 按 Ctl+N 组 合 键 ， 人 @ 弹 出 “新 建文 档 ” 对 话 框 ，@ 设 置 “ 名 称 ” 为 “ 店 招 设计 ”、“ 宽 度 ” 

为 1080 像 素 、“ 高 度 ” 为 1400 像 素 、“ 分 辨 率 ” 为 300 像 素 /英寸 、“ 颜 色 模式 ”为 “RGB 颜色 ”、 
“背景 内 容 ” 为 “白色 ”， 如 图 13-9 所 示 ， 合 单 击 “ 创 建 ” 按 钮 ， 新 建 一 个 空白 图 像 。 

9 STEP 02 按 Ctrl+O 组 合 键 ， 打 开 “ 店 招 背 景 jpg” 素 材 图 像 ， 如 图 13-10 所 示 。 

© STEP 03 单 击 “ 窗 口 ” | “调整 ”命令 ，@@ 打 开 “ 调 整 ” 面 板 ，@@ 在 “调整 ”面板 中 单 击 “ 亮 度 /对 比 
度 ” 按 钮 ， 如 图 13-11 所 示 。 

9 STEP 04 新 建 “ 亮 度 /对 比 度 1” 调 整 图 层 ， 在 展开 的 “属性 ”面板 中 设置 “亮度 ”为 353、“ 对 比 度 ” 


为 21， 如 图 13-12 所 示 。 
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. ® bed E 
图 13-9 设置 各 选项 图 13-10 素材 图 像 


尾 性 Device Prevlew 朱 | 至 


圈 口 me itt 


本 天 总 = 
亮度 /对比度 
尝 山 困 国 入 


器 癸 
图 13-11 单 击 “亮度 /对 比 度 ” 按 钮 图 13-12 设置 各 参数 
9 STEP 05 在 “调整 ”面板 中 单 击 “自然 饱和 度 ” 按 钮 ， 新 建 “ 自 然 饱 和 度 1” 调 整 图 层 ， 在 “属性 ” 
面板 中 设置 “自然 饱和 度 ” 为 50， 效 果 如 图 13-13 所 示 。 
9 STEP 06 按 Shift+Ctrl+Alt+E 组 合 键 ， 盖 印 可 见 图 层 ， 得 到 “图 层 1” 图 层 ， 如 图 13-14 所 示 。 


正常 ~ 不 透明 度 ; 100% ~ 
铁定: 图 A 中 本 人 填充 : 100% ~ 


。 BE 


© 908 自然 抱 和 度 1 
@。@9 {得 到 | 襄 度 网 比 度 1 


© 国 国有 自 


f 光 录 DO GO 回合 

图 13-13 图 像 效 果 图 13-14 得 到 “图 层 1” 图 层 

e@STEP 07 单 击 “ 滤 镜 ”|“ 像 素 化 ”|“ 彩 块 化 ”命令 ， 将 图 像 转化 为 小 的 彩 块 ， 效 果 如 图 13-15 所 示 。 

9 STEP 08 单 击 “ 滤 镜 ”|“ 滤 镜 库 ” 命 令 ， 打 开 滤 镜 库 ， 全 选择 “木刻 ” 滤 镜 效果 ， 外 设置 “ 色 阶 数 " 
为 8、“ 边 缘 简 化 程度 ”为 6、“ 边 缘 盘 真 程度 ”为 3， 如 图 13-16 所 示 。 
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一 一 一 一 、 | 
让 家 指点 )】 二 了 六 果 或 带 有 装 亿 性 的 纹理 效果 。Photoshop CC 2017 提 供 了 多 种 江 镜 ， 使 用 这 些 
”小 镜 ， 用 户 无 须 耗费 大 量 的 时 间 和 精力 就 可 以 快速 地 制作 出 云彩 、 马 赛 克 、 模 糊 、 素 描 、 光 照 以 
。 及 各 种 扭曲 效果 。 
| 滤 镜 是 Photoshop 的 重要 组 成 部 分 ， 它 就 像 是 一 个 魔术 师 ， 很 难 想象 如 果 没 有 滤 镜 ，Photoshop : 
”还 能 否 成 为 图 像 处 理 领域 的 领先 软件 。 因 此 ， 渡 镜 对 每 一 个 使 用 Photoshop 的 用 户 而 言 ， 都 具有 很 
， 重要 的 意义 。 滤 镜 可 能 是 作品 的 润色 剂 ， 也 可 能 是 作品 的 腐蚀 剂 ， 到 底 扮演 的 是 什么 角色 ， 取 决 
， 于 操作 者 如 何 正确 使 用 滤 镜 。 
eSTEP 09 单 击 “确定 ”按钮 ， 即 可 应 用 “木刻 ” 滤 镜 ， 制 作出 扁平 化 风格 的 背景 ， 效 果 如 图 13-17 
所 示 。 

9 STEP 10 运用 移动 工具 将 素材 图 像 拖 彼 至 背景 图 像 编辑 窗口 中 ， 适 当 调 整 图 像 的 大 小 和 位 置 ， 效 果 如 
图 13-18 所 示 。 


拖 粤 并 调整 


图 13-17 ”应 用 “木刻 ” 滤 镜 图 13-18 拖 慢 并 调整 图 像 
eSTEP 11 选取 工具 箱 中 的 矩形 选 框 工 具 ， 在 图 像 编 辑 窗口 中 的 适当 位 置 绘制 一 个 矩形 选 框 ， 如 图 13-19 
所 示 ， 设 置 前 景色 为 白色 ( RGB 参 数值 均 为 255 ) 。 
9 STEP 12 新 建 一 个 图 层 ， 为 选区 填充 白色 并 取消 选区 ， 设 置 图 层 的 “不 透明 度 ” 为 76%， 效 果 如 图 
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13-20 所 示 。 


图 13-19 ”绘制 矩形 选 框 图 13-20 填充 白色 
9 STEP 13 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 无 、“ 描 边 ” 为 白色 ( RGB 参数 
值 均 为 255 ) 、“ 描 边 宽度 ”为 15 点 ， 在 图 像 编 辑 窗口 中 的 适当 位 置 绘制 一 个 矩形 形状 ， 并 设置 “不 
透明 度 ”为 80%， 如 图 13-21 所 示 。 
9 STEP 14 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “创意 繁 隶书 ”、 
“字体 大 小 ”为 25 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -50、“ 颜 色 ” 为 暗 橙色 ( RGB 参数 值 分 别 为 
196、70、1 ) ， 并 激活 仿 粗 体 图 标 ， 在 图 像 编辑 窗口 中 输入 文字 ， 如 图 13-22 所 示 。 


绘制 


图 13-21 绘制 矩形 图 13-22 输入 文字 
9 STEP 15 复制 刚刚 输入 的 文字 ， 移 至 合适 位 置 ， 在 “字符 ”面板 中 设置 “大 小 ”为 11 点 、“ 设 置 所 选 
字符 的 字 距 调整 ”为 23、“ 颜 色 ” 为 咖啡 色 ( RGB 参 数值 分 别 为 155、85、24 ) ， 并 修改 文字 内 容 ， 
如 图 13-23 所 示 。 
9 STEP 16 选取 工具 箱 中 的 矩形 工具 ， 在 工具 属性 栏 中 设置 “选择 工具 模式 ”为 “形状 ”、 “填充 ”为 
白色 ( RGB 参数 值 均 为 255 ) 、“ 描 边 ”为 灰色 ( RGB 参数 值 均 为 83 ) 、“ 描 边 宽度 ”为 1 像素 ， 在 图 
像 编辑 窗口 中 的 适当 位 置 绘制 一 个 矩形 形状 ， 如 图 13-24 所 示 。 


于 六 好 号 o 啡 


至 醇 至 汗 ， 和 细腻 香甜 


和 于 选 好 no 啡 


| 至 醇 至 漠 ， 狠 且 香 甜 


图 13-23 修改 文字 内 容 图 13-24 ”绘制 矩形 
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9 STEP 17 按 Ctrl+O 组 合 键 ， 打开“ 标志 按钮 素材 psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 折 至 背 


Ph ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 13-25 所 示 。 
© STEP 18 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 细 黑 一 简 
体 ”、“ 字 体 大 小 ”为 15 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -50、“ 颜 色 ” 为 深 灰 色 ( RGB 参数 值 
均 为 30 ) ， 在 图 像 编 辑 窗口 中 输入 文字 ， 如 图 13-26 所 示 。 


景 图 像 编辑 窗口 


| 票选 好 Wo 啡 


1 一 三 朴 至 静 本 咸 埋 狼 


图 13-25 拖 名 图 像 图 13-26 输入 文字 
刚 输入 的 文字 ， 并 移动 至 合适 位 置 ， 在 “字符 ”面板 中 设置 “字体 大 小 ”为 11 点 、 
“颜色 ”为 灰色 ( RGB 参 数值 均 为 153 ) ， 运 用 横 排 文 字 工具 


eSTEP 19 复制 刚 
“设置 所 选 字符 的 字 距 调整 ”为 -100、 
修改 文本 内 容 ， 如 图 13-27 所 示 。 

e@5STEP 20 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “方正 细 黑 一 简 
体 ”、“ 字 体 大 小 ”为 10 点 、“ 行 距 ” 为 11 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 -100、“ 颜 色 ” 为 灰 
色 ( RGB 参数 值 均 为 100 ) ， 在 图 像 编 辑 窗口 中 输入 文字 ， 如 图 13-28 所 示 。 


| 亚 选 好 加 非 
| 
-= 
名 
威 尔 咖啡 
© 
图 13-27 修改 文本 内 容 图 13-28 输入 文字 
层 编组 ， 得 到 “组 1” 图 层 组 ， 如 


层 外 的 所 有 图 层 ， 按 Ctrl+G 组 合 键 ， 为 图 


© STEP 21 选中 除 “ 背 景 ” 
图 13-29 所 示 。 
e@ STEP 22 按 Ctrl+O 组 合 键 ， 打 开 “ 微 店 界面 1.jpg” 素 材 图 像 ， 切 换 至 背景 图 像 编辑 窗 口 ， 运 用 移动 


层 组 的 图 像 拖 中 至 刚 打 开 的 图 像 编辑 窗口 中 ， 适 当 调整 图 像 的 位 置 ， 效 果 如 图 13-30 所 示 。 


具 将 图 
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通道 ”路 色 。 图 层 三 
Pa 四 @OTDB 。 
正常 趟 透明 度 : 100% 
锁定 :加 w 中 村 全 填充 : 100% 枝 和 还 好 欢 旨 
=- a | sm 
© 委 景 和 二 ; 
得 到 拖 凡 >。 gy 
威 尔 咖 叶 
we | 
AQOGO 饭 避 他 Eo 
图 13-29 得 到 “组 1” 图 层 组 图 13-30 ”图像 效果 


在 制作 商品 简介 区 时 ， 运 用 带 有 趣味 性 的 字体 制作 出 顶部 的 广告 区 ， 再 用 多 张 精 美 的 图 片 制作 出 
展示 区 ， 并 添上 说 明 性 文字 ， 即 可 完成 设计 。 
本 实例 的 最 终 效果 如 图 13-31 所 示 。 


【前 要 】 亿 地 | 屿 相手 血本 简约 个 性 清 轩 百 。。 【条 苏 】 包 部 | SA 级 红 本 对 本 全 年 和 过 玉 入 品 - 
¥98.90 + ¥5690 + 


图 13-31 实例 效果 


素材 文件 “| 素材 \ 第 13 章 \ 商 品 素 材 1jpg、 商 品 素材 2jpg、 商 品 素材 3.jpg、 微 店 界面 2.jpg 
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9 STEP 01 单 击 “文件 ”|“ 新 建 ” 命 令 ， 人 @ 弹 出 “新 建文 档 ” 对 话 框 ， 合 设置“ 名称 ”为 “商品 简介 
设计 ”、“ 宽 度 ”为 1080 像 素 、“ 高 度 ” 为 1000 像 素 、“ 分 辨 率 ”为 300 像 素 /英寸 、“ 颜 色 模 式 ” 
"RGB 颜色 ”、“ 背 景 内 容 ” 为 “白色 ”， 合 单 击 “ 创 建 ” 按 钮 如 图 13-32 所 示 ， 新 建 一 个 空白 图 像 。 

9 STEP 02 新 建 一 个 图 层 ， 选 取 工 具 箱 中 的 矩形 选 框 工 具 ， 在 图 像 编 辑 窗口 中 的 合适 位 置 绘制 一 个 和 矩 
选区 ， 如 图 13-33 所 示 。 


半 冈 


SS 
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新 媒体 广告 设计 
有 = a f 
@ 设 置 一 9 绘制 
单一 >@ Ca) 
图 13-32 设置 各 选项 图 13-33 ”绘制 矩形 选区 
9 STEP 03 设置 前 景色 为 黑色 ( RGB 参数 值 均 为 0 ) ， 为 选区 填充 前 景色 并 取消 选区 ， 如 图 13-34 所 示 。 
9 STEP 04 单 击 “ 滤 镜 ”|“ 杂 色 ”|“ 添 加 杂 色 ”命令 ，@ 弹 出 “添加 杂 色 ”对 话 框 ，@ 设 置 “ 数 量 ” 


为 16.8%， 选中 “高 斯 分 布 ” 单 选 按钮 和 “ 单 色 ” 复 选 框 ， 如 图 13-35 所 示 。 


“减少 杂 色 ” 滤 镜 与 “添加 杂 色 ” 
正好 相反 ， 运 用 它 可 以 有 效 减少 照片 中 的 杂 色 。 在 使 用 相机 拍照 时 ， 如 果 用 很 高 的 
Sn 曝光 不 足 或 用 较 慢 的 快门 


pa 在 “ 杂 色 ” 
指点 ) 


渡 镜 组 中 包含 了 5 种 小 镜 ， 


滤 镜 : 


速度 在 黑暗 区 域 中 拍照 ， 有 可 能 会 导致 出 现 杂 色 ， 此 时 可 运 
“减少 杂 色 ” 滤 镜 去 除 照 片 中 的 杂 色 。 了 
9 STEP 05 单 击 “ 确 定 ”按钮 ， 即 可 应 用 “添加 杂 色 ” 滤 镜 ， 制 作出 带 有 纹理 效果 的 背景 ， 如 图 13-36 
所 示 。 


| 


取消 选区 应 用 滤 镜 
图 13-34 取消 选区 图 13-35 设置 各 选项 图 13-36 应 用 “添加 杂 色 ” 滤 镜 
9 STEP 06 按 Ctrl+O 组 合 键 ， 打开“ 商品 素材 1.jpg” 素 材 图 像 ， 按 Ctrl+J 组 合 键 复制 ee 图 层 ， 
人 @ 得 到 “图 层 1” 图 层 ，@ 并 隐藏 “背景 ”图 层 ， 如 图 13-37 所 示 。 
9 STEP 07 选取 工具 箱 中 的 魔 棒 工具 ， 在 工具 属性 栏 中 设置 “ 容 差 ”为 1， 在 图 像 背景 的 白色 区 域 单 击 
鼠标 左 键 ， 创 建 选区 ， 效 果 如 图 13-38 所 示 。 
9 STEP 08 按 Delete 键 ， 删 除 选区 内 的 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编 辑 窗口 中 ， 适 当 
调整 图 像 的 大 小 与 位 置 ， 并 为 “图 层 2” 图 层 添加 默认 的 “投影 ”样式 ， 效 果 如 图 13-39 所 示 。 
@STEP 09 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 全 设置 “字体 系列 ”为 “方正 兰亭 超 细 黑 
简体 ”、“ 字 体 大 小 ”为 17 点 、“ 颜 色 ” 为 ( RGB 参 数值 均 为 255 ) ，@ 并 激活 仿 粗 体 图 标 ， 如 
图 13-40 所 示 。 
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9 STEP 10 在 图 像 编 辑 窗口 中 输入 文本 ， 并 移 至 合适 位 置 ， 效 果 如 图 13-41 所 示 。 
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正常 @ 得 透明 度 : 100% 

锁 主 : 图 w 中 全 人 填充 : 100% 
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| 用 课 @ 添加 样式 
四 隐藏 
六 OOG 锯 避 会 
图 13-37 得 到 “图 层 1” 图 层 图 13-38 ”创建 选区 图 13-39 添加 图 层 样式 


美国 英语 aa | 浑厚 


图 13-40 设置 各 选项 图 13-41 输入 文字 
9 STEP 11 复制 刚刚 输入 的 文字 ， 运 用 移动 工具 将 其 移 至 合适 位 置 ， 设 置 “ 字 体 ” 大 小 为 8.5 点 ， 运 用 横 
排 文 字 工具 修改 文本 内 容 ， 效 果 如 图 13-42 所 示 。 
9 STEP 12 新 建 图 层 ， 选 取 工具 箱 中 的 矩形 选 框 工 具 ， 在 图 像 编辑 窗口 中 绘制 一 个 矩形 选 框 ， 填 充 灰 色 
(RGB 参数 值 均 为 226 ) 并 取消 选区 ， 效 果 如 图 13-43 所 示 。 


设计 师 专区 ， 匠 心 设计 四 + 站， 


取消 选区 


图 13-42 修改 文本 内 容 图 13-43 ”填充 并 取消 选区 
9 STEP 13 按 Ctrl+O 组 合 键 ， 打 开 “ 商 品 素 材 2.jpg” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 忠 至 背景 
像 编辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 13-44 所 示 。 
© STEP 14 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “微软 雅 黑 ' -二 
体 大 小 ”为 5.5 点 、“ 颜 色 ” 为 灰色 ( RGB 参数 值 均 为 42 ) ， 在 图 像 编辑 窗口 中 输入 文字 ， 如 图 13-45 
所 示 。 


Photoshop 
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rr 输入 


图 13-44 拖 押 图像 图 13-45 输入 文本 
9 STEP 15 选取 工具 箱 中 的 横 排 文字 工具 ， 在 “字符 ”面板 中 设置 “字体 系列 ”为 “微软 雅 黑 ”、 


体 大 小 ”为 6.5 点 、“ 颜 色 ” 为 红色 ( RGB 参 数值 分 别 为 211、30、45 ) ， 在 图 像 编辑 窗口 中 输入 文 


字 ， 如 图 13-46 所 示 。 


9 STEP 16 选取 工具 箱 中 的 椭圆 工具 ， 在 工具 属性 栏 中 “填充 ”为 无 、“ 描 边 ”为 浅 灰色 ( RGB 参 数值 均 


为 220 ) 、“ 描 边 宽度 ”为 1 像素 ， 在 图像 编辑 窗口 中 的 适当 位 置 绘制 一 个 椭圆 形状 ， 如 图 13-47 所 示 。 
9 STEP 17 选取 工具 箱 中 的 直线 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 红色 ( RGB 参数 值 分 别 为 21 
30、45 ) 、“ 粗 细 ” 为 4 像素 ， 绘 制 一 个 直线 形状 ， 如 图 13-48 所 示 。 


1 性 清 章 百 .… 
【简要 】 包 邮 ! 纯 根 手链 韩版 简约 个 性 清新 百 所 一 绘制 
¥98.90 所 一 输入 
图 13-46 输入 文字 图 13-47 绘制 椭圆 


9 STEP 18 复制 “形状 1” 图 层 ， 得 到 “形状 1 拷贝 ”图 层 ， 按 Ctrl+T 组 合 键 ， 调 出 变换 控制 框 ， 在 了 


1、 


属性 栏 中 设置 “旋转 ”为 90 度 ， 按 Enter 键 确认 变换 ， 如 图 13-49 所 示 。 


个 性 清新 百 .… 个性 清新 百 .… 


|< 区 十 一 | 立交 


图 13-48 ”绘制 直线 图 13-49 ”确认 变换 
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9 STEP 19 展开 “图 层 ” 面板 ， 选 中 相应 图 层 ， 如 图 13-50 所 示 。 


e@ STEP 20 按 Ctrl+G 组 合 键 ， 为 图 层 编组 ， 并 重 命名 为 “商品 信息 1”， 如 图 13-51 所 示 。 


© TT [Na ttf: WR- 


对 国 = ee 国王 : 


口 9. 牟 避让 


图 13-50 选中 相应 图 层 图 13-51 重 命名 图 层 组 
9 STEP 21 按 Ctrl+O 组 合 键 ， 打开“ 商品 素材 3.jpg” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 折 至 背景 


像 编辑 窗口 中 ， 适 当 调 整 图 像 的 位 置 ， 效 果 如 图 13-52 所 示 。 
9 STEP 22 复制 “商品 信息 1” 图 层 组 ， 得 到 “商品 信息 1 拷贝 ” 图 层 组， 将 图 像 移动 至 合适 位 置 ， 刀 


现 


图 13-53 所 示 。 


设计 师 专 区 ， 匠 心 设计 设计 师 专区 ， 匠 心 设计 
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图 13-52 拖 彼 图 像 图 13-53 移动 图 像 
9 STEP 23 选取 工具 箱 中 的 横 排 文字 工具 ， 修 改 相 应 文本 内 容 ， 效 果 如 图 13-54 所 示 。 
9 STEP 24 选取 工具 箱 中 的 直线 工具 ， 在 工具 属性 栏 中 设置 “填充 ”为 灰色 ( RGB 参 数值 均 为 226 ) 、 
“粗细 ”为 2 像素 ， 在 商品 图 片 中 间 绘 制 一 个 直线 形状 ， 效果 如 图 13-55 所 示 。 


匠心 设 


图 13-54 修改 相应 文本 内 容 图 13-55 绘制 直线 
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二 二 , 直线 工具 用 来 创建 直线 和 带 有 箭头 的 线段 。 选 择 该 工具 后 ， 按 住 并 拖 旧 筷 标 可 以 
| 过 家 指点 ) 创建 直 堪 和 线段， 接任 Shin 刍 ， 可 以 创建 水 平 、 委 直 或 以 45 度 角 为 增 量 的 直线 。 
人 还 可 以 绘制 篆 头 ， 单 击 “ 粗 细 ” 左 侧 的 下 拉 按钮 ， | 


和 1 层 外 的 所 有 图 层 ， 按 Ctl+G 组 合 键 ， 为 图 导 编 组 ， 得 到 “组 1” 图 层 组 ， 如 


ED | 图 


图 13-56 所 示 。 
e@ STEP 26 按 Ctrl+O 组 合 键 ， 打 开 “ 微 店 界面 2.jpg” 素 材 图 像 ， 运 用 移动 工具 将 图 层 组 的 图 像 拖 抱 至 刚 


打开 的 图 像 编辑 窗口 中 ， 适 当 调整 图 像 的 位 置 ， 效 果 如 图 13-57 所 示 。 
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图 13-56 得 到 “组 1” 图 层 组 图 13-57 ”图 像 效果 


美 妆 微 店 界 面 设 计 


在 制作 美 妆 微 店 界 面 时 ， 使 用 了 淡 黄 色 作 为 背景 色调 ， 并 搭配 蓝 色 来 营 


本 实例 的 最 终 效果 如 图 13-58 所 示 。 


造 出 一 种 清新 、 淡 雅 的 视 


图 13-58 ”实例 效果 
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素材 \ 第 13 章 \ LOGO.psd、 按 钮 .psd、 商 品 图 片 1.psd、 首 页 链接 .psd、 商 品 
素材 文件 “| 图片 2.psd、 文 字 1.psd、 展 示 区 1.psd、 展 示 区 2.psd、 背 景 jpg、 商 品 图 片 
3.psd、 文 字 2.psd 


效果 文件 “| 效果 \ 第 13 章 \ 美 妆 微 店 界面 设计 .psd、 美 妆 微 店 界面 设计 :jpg 

加 wj 视频 文件 “| 13.2.3 美 妆 微 店 界面 设计 .mp4 

@ STEP 01 按 Ctl+N 组 合 键 ，@ 弹 出 “新 建文 档 ” 对 话 框 ，@ 设 置 “ 名 称 ” 为 “ 美 妆 微 店 界面 设计 ”、 
“宽度 ”为 1440 像 素 、“ 高 度 ” 为 3200 像 素 、“ 分 辩 率 ”为 300 像 素 /英寸 、“ 颜 色 模式 ”为 “RGB 颜 
色 ”、“ 背 景 内 容 ” 为 “和 白色 ”， 息 单 击 “ 创 建 ”按钮 ， 如 图 13-59 所 示 ， 新 建 一 个 空白 图 像 。 

9 STEP 02 设置 前 景色 为 淡 黄 色 ( RGB 参 数值 分 别 为 245、236、202 ) ， 如 图 13-60 所 示 ， 按 AlttDelete 组 
合 键 ， 为 “背景 ”图 层 填充 前 景色 。 


”os#yj， 


职 消 


淋 加 到 色 板 
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只 有 Web 疡 名 


名单 击 DG) 
图 13-59 设置 各 选项 图 13-60 设置 前 景色 


© STEP 03 新 建 “ 图 层 1” 图 层 ， 运 用 和 矩形 选 框 工具 创建 一 个 矩形 选区 ， 如 图 13-61 所 示 。 
@ STEP 04 运用 渐变 工具 为 选区 填充 前 景色 到 白色 的 线性 渐变 ， 并 取消 选区 ， 效 果 如 图 13-62 所 示 。 


图 13-61 创建 矩形 选区 图 13-62 ”填充 渐变 
e@5STEP 05 打开 “LOGO.psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 抱 至 背景 图 像 编辑 窗口 中 的 合适 
位 置 处 ， 效 果 如 图 13-63 所 示 。 
9 STEP 06 选取 工具 箱 中 的 直线 工具 ， 设 置 “ 填 充 ” 颜 色 为 暗 黄 色 ( RGB 参 数值 分 别 为 214、180、 
91 ) 、“ 粗 细 ” 为 5 像素 ， 在 图 像 中 绘制 一 条 直线 ， 如 图 13-64 所 示 。 
9 STEP 07 栅 格 化 形状 图 层 ， 运 用 椭圆 选 框 工 具 在 直线 上 创建 一 个 椭圆 选区 ， 并 按 Delete 键 删除 选区 内 
的 图 像 ， 新 建 “图 层 2” 图 层 ， 为 选区 添加 描 边 ， 设 置 “宽度 ”为 2 像素 、“ 颜 色 ” 暗 黄色 ( RGB 参数 


Photoshop 
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值 分 别 为 214、180、91 ) ， 选 中 “内 部 ” 单 选 按钮 ， 并 取消 选区 ， 效 果 如 图 13-65 所 示 。 
© STEP 08 打开 “按钮 psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 遇 至 背景 图 像 编 辑 窗口 中 的 合适 位 


置 ， 效 果 如 图 13-66 所 示 。 
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图 13-63 拖 旬 图 像 
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图 13-65 ”取消 选区 
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图 13-64 ”绘制 直线 
OO 美 妆 老 店 本 时 园 铺 


图 13-66 扼 昌 图 像 


9 STEP 09 新 建 “图 层 4” 图 层 ， 运 用 和 珑 形 选 框 工 具 绘 制 一 个 矩形 选区 ， 如 图 13-67 所 示 。 
9 STEP 10 选取 工具 箱 中 的 渐变 工具 ， 设 置 渐变 色 为 白色 到 蓝 色 ( RGB 参数 值 分 别 为 86、200、236 ) ， 


如 图 13-68 所 示 。 


图 13-67 ”绘制 矩形 选区 


9 STEP 11 在 工具 属性 栏 中 单 击 “ 径 向 渐变 ”按钮 ， 在 选 


合 键 ， 取 消 选区 ， 效 果 如 图 13-69 所 示 。 


图 13-68 设置 渐变 色 


区 内 单 击 并 拖 提 鼠标 填充 渐变 色 ， 按 Ctrl+D 组 


eSTEP 12 打开 “商品 图 片 1psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 忠 至 背景 图 像 编辑 窗口 中 的 合 
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适 位 置 ， 如 图 13-70 所 示 。 


OO 半 直 老臣 区 加 全 
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图 13-69 填充 渐变 色 并 取消 选区 图 13-70 拖 旭 图 像 
9 STEP 13 复制 商品 图 层 ， 将 其 进行 垂直 翻转 并 调整 至 合适 位 置 ， 为 拷贝 的 图 层 添加 图 层 蒙 版 ， 并 填充 
黑色 到 白色 的 线性 渐变 ， 设 置 图 层 的 “不 透明 度 ” 为 30%， 并 将 图 层 调 至 “图 层 5” 图 层 下 方 ， 效 果 如 
图 13-71 所 示 。 
9 STEP 14 打开 “首页 链接 .psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 中 至 背景 图 像 编辑 窗口 中 的 合 
适 位 置 ， 如 图 13-72 所 示 。 


图 13-71 图像 效果 图 13-72 拖 疫 图 像 
9e STEP 15 运用 和 矩 形 工具 在 欢迎 模块 下 方 绘制 一 个 红色 的 和 矩 形 ( RGB 参 数值 分 别 为 250、14、76 ) 形 
状 ， 如 图 13-73 所 示 。 
9 STEP 16 用 同样 的 方法 绘制 一 个 和 白色 的 矩形 形状 ， 并 适当 调整 其 位 置 ， 如 图 13-74 所 示 。 


图 13-73 ”绘制 红色 矩形 图 13-74 ”绘制 白色 矩形 
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9 STEP 17 打开 “商品 图 片 2.psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 忠 至 背景 图 像 编辑 窗口 中 的 合 
适 位 置 ， 如 图 13-75 所 示 。 
9 STEP 18 选取 横 排 文字 工具 ， 设 置 “ 字 体系 列 ”为 “方正 粗 宋 简体 ”、“ 字 体 大 小 ”为 8 点 、“ 所 选 
字符 的 字 距 调整 ”为 600、“ 颜 色 ” 为 白色 ， 在 图 像 上 输入 相应 文字 ， 效 果 如 图 13-76 所 示 。 
| | 


图 13-75 拖 旬 图 像 图 13-76 输入 文字 
9 STEP 19 运用 矩形 工具 在 适当 位 置 绘制 红色 ( RGB 参 数值 分 别 为 250、14、76 ) 的 矩形 形状 ， 在 “ 字 
符 ” 面 板 中 设置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 4 点 、“ 设 置 所 选 字符 的 字 距 调整 ”为 
500、“ 颜 色 ” 为 和 白色， 激活 “ 仿 粗 体 ” 图 标 ， 运 用 横 排 文 字 工具 在 图 像 上 输入 相应 文字 ， 如 图 13-77 
所 示 。 
9 STEP 20 打开 “文字 1.psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 昂 至 背景 图 像 编辑 窗 口中 的 合适 位 
置 ， 如 图 13-78 所 示 。 


图 13-77 输入 文字 图 13-78 拖 慢 图 像 

9 STEP 21 选取 横 排 文字 工具 ， 设 置 “ 字 体系 列 ” 为 “黑体 ”、“ 字 体 大 小 ”为 15 点 、“ 设 置 所 选 字符 
的 字 距 调整 ”为 500、“ 颜 色 ” 为 红色 ( RGB 参 数值 分 别 为 250、14、76 ) ， 在 图 像 上 输入 相应 文字 ， 
如 图 13-79 所 示 。 

9 STEP 22 选取 工具 箱 中 的 直线 工具 ， 设 置 “填充 ”为 灰色 ( RGB 参数 值 均 为 215 ) 、“ 粗 细 ” 为 2 像 
素 ， 在 图 像 中 绘制 一 条 直线 ， 如 图 13-80 所 示 。 

9 STEP 23 选取 横 排 文字 工具 ， 设置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 6 点 、“ 颜 色 ” 为 黑 
色 ， 输 入 相应 文字 ， 效 果 如 图 13-81 所 示 。 

9 STEP 24 复制 “和 矩形 1 图 层 ”， 得 到 “和 形 1 乒 贝 ”图 层 ， 修 改 颜 色 为 紫色 ( RGB 参数 值 分 别 为 197、 
190、255 ) ， 并 适当 调整 其 大 小 和 位 置 ， 如 图 13-82 所 示 。 
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超 优 惠 ， 泣 就 过 神 放 好 礼 


超 优 惠 ， 满 就 适 神 生 好 礼 


图 13-79 输入 文字 图 13-80 绘制 直线 


你 护 补 六 保 涝 注油 
比 具 流 更 洲 油 的 护 台 本 受 


FF 匡 总 THE END 
图 13-81 输入 文字 图 13-82 调整 大 小 和 位 置 


9 STEP 25 打开 “展示 区 1.psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 电 至 背景 图 像 编辑 窗口 中 ， 并 调 
整 其 大 小 和 位 置 ， 效 果 如 图 13-83 所 示 。 

9 STEP 26 选取 横 排 文字 工具 ， 设 置 “字体 系列 ”为 “方正 粗 宋 简 体 ”、“ 字 体 大 小 ”为 10 点 、“ 颜 
色 ” 为 和 白色， 在 图 像 上 输入 相应 文字 ， 如 图 13-84 所 示 。 


重 态 推 荐 ! 植 特 能量 洪 涧 朴 水 组 合 


后 守 已 的 W2528 站 


补水 保湿 套装 
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图 13-83 拖 提 图 像 图 13-84 输入 文字 
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EE 司 ) 输入 文字 时 如 果 要 换行 ， ae tna | | 
如 果 要 移动 文字 的 位 置 ， 可 以 将 光标 放 在 字符 以 外 ， 当 鼠标 指针 旦 M4 形状 
时 ， 按 住 鼠 标 左 键 并 拖 役 ， 即 可 移动 文字 。 本 


oSTEP 27 设置 前 景色 为 淡 黄 色 (RGB 参 数值 分 别 为 255、 232< ee 5 ， 运 用 圆 角 箱 形 工具 绘制 一 人 
“半径 ”为 10 像 素 的 圆 角 矩形 形状 ， 如 图 13-85 所 示 。 

9 STEP 28 选取 横 排 文 字 工具 ， 设 置 “字体 系列 ”为 “黑体 ”、“ 字 体 大 小 ”为 6 点 、“ 所 选 字 符 的 字 
距 调整 ”为 200、“ 颜 色 ” 为 红色 ( RGB 参 数值 分 别 为 243、41、96 ) ， 在 图 像 上 输入 相应 文字 ， 如 
图 13-86 所 示 。 


重 磅 推荐 ! 植物 能 量 滋润 补水 组 合 重 兢 推 荐 ! 植物 能 粳 进 润 朴 水 组 合 
二 闫 二 电信 12583 机 TAB. CMDE 


补水 保湿 套装 补水 保湿 套装 
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图 13-85 绘制 国 角 和 珑 形 图 13-86 输入 文字 
9 STEP 29 打开 “展示 区 2.psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 遇 至 背景 图 像 编 辑 窗口 中 的 合适 
位 置 ， 效 果 如 图 13-87 所 示 。 

9 STEP 30 创建 “标题 栏 ”图 层 组 ， 将 前 而 制作 的 标题 栏 相关 图 层 移动 到 其 中 ， 效果 如 图 13-88 所 示 。 
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图 13-87 拖 如 图 像 图 13-88 移动 图 层 

9 STEP 31 并 复制 该 图 层 组 ， 将 复制 后 的 图 像 移动 至 合适 位 置 ， 运 用 横 排 文 字 工 具 修 改 相 应 的 文字 内 
容 ， 效 果 如 图 13-89 所 示 。 

9 STEP 32 打开 “背景 jpg” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 蝶 至 背景 图 像 编 辑 窗口 中 的 合适 位 
置 ， 如 图 13-90 所 示 。 

9 STEP 33 在 “图 层 9” 图 层 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “混合 选项 ”命令 ， 打 开 图 层 样 
式 对 话 框 ， 选 中 “投影 ” 复 选 框 ， 设 置 “不 透明 度 ” 为 73%、 “角度 ”为 120 度 、“ 距 离 ” 为 5 像素 、 
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“扩展 ”为 0、“ 大 小 ”为 5 像素 ， 单 击 “ 确 定 ”按钮 ， 即 可 应 用 “投影 ”图 层 样 式 ， 如 图 13-91 所 示 。 
9 STEP 34 打开 “商品 图 片 3.psd” 素 材 图 像 ， 运 用 移动 工具 将 素材 图 像 拖 抱 至 背景 图 像 编辑 窗口 中 的 合 
适 位 置 ， 如 图 13-92 所 示 。 


图 13-89 修改 相应 的 文字 内 容 
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图 13-91 应 用 “投影 ”图 层 样 式 图 13-92 拖 役 图 像 
9 STEP 35 单 击 “ 滤 镜 ”|“ 泻 染 ”|“ 和 镜头 光 晕 ”命令 ， 弹 出 “镜头 光 晕 ”对 话 框 ， 设 置 “镜头 类 型 ” 
为 “50-300 毫 米 变焦 ”， 适 当 移 动 镜头 焦点 ， 如 图 13-93 所 示 。 


9 STEP 36 单 击 “确定 ”按钮 ， 应 用 “镜头 光 晕 ” 滤 镜 ， 效 果 如 图 13-94 所 示 。 


图 13-93 移动 镜头 焦点 图 13-94 图像 效 果 
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《专家 指点 ) > 光 旱 中心 ; 


在 对 话 框 的 图 像 缩 览 图 上 单 击 或 拖 动 十 字 线 ， 可 以 指定 光学 中 心 。 
“亮度 ”选项 : 用 来 控制 光学 的 强度 ， 变 化 范围 为 10% 一 300%。 


区: 用 林寺 多 信 生 洲 年 的 使 头 类 型。 
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9 STEP 37 选取 横 排 文 字 工具 ， 设 置 “ 字 体系 列 ”为 “微软 简 行 档 ”、 “字体 大 小 ”为 18 点 、“ 颜 色 ” 


为 粉色 ( RGB 参 数值 分 别 为 255、115、128 ) ， 激 活 仿 粗 体 图 标 ， 在 图 像 上 输入 相应 文字 ， 效 果 如 
图 13-95 所 示 。 


9 STEP 38 单 击 “ 图 层 ”|“ 图 层 样 式 ”|“ 描 边 ”命令 , @ 打 开 “ 图 层 样 式 ”对 话 框 ，@ 设 置 “ 大 小 ”为 
5 像素 、“ 位 置 ” 为 “外 部 ”、“ 不 透明 度 ” 为 100%、 


“颜色 ”为 白色 ( RGB 参 数值 均 为 255 ) ， 
如 图 13-96 所 示 。 


图 13-95 输入 文字 图 13-96 设置 参数 

9 STEP 39 选中 “投影 ” 复 选 框 ， 设 置 “不 透明 度 ” 为 73%、 “角度 ”为 120 度 、“ 距 离 ” 为 13 像 素 、 
“扩展 ”为 20%、“ 大 小 ”为 8 像素 ， 单 击 “ 确 定 ”按钮 ， 即 可 为 文字 添加 相应 图 层 样式 ， 效 果 如 
图 13-97 所 示 。 


9 STEP 40 打开 “文字 2.psd” 素 材 图 像 ， 运 用 移动 了 


[ 具 将 素材 图 像 拖 中 至 背景 图 像 编辑 窗口 中 的 合适 位 
置 ， 效 果 如 图 13-98 所 示 。 
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图 13-97 添加 图 层 样 式 图 13-98 拖 慢 图 像 


